index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div ng-app="myApp">

    <div  ng-controller="firstController">

        <div book-list></div>

    </div>

</div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

<script>

</script>

</body>

</html>

　　index.js:

var myApp = angular.module('myApp', [])

    .directive('bookList', function () { //bookList对应view层的book-list

        return {

            restrict: 'ECAM',

            controller: function ($scope) {

                $scope.books = [

                    {

                        name: 'php'

                    },

                    {

                        name: 'js'

                    },

                    {

                        name: 'java'

                    }

                ];

                this.addBook = function () {

                    //$scope.$apply为全局刷新 在更新完model层数据源$scope.books后也要刷新view层显示

                    $scope.$apply(function () {

                        $scope.books.push({

                            name:'iOS'

                        })

                    })

                }

            },

            controllerAs: 'bookListController', //起一个别名

            template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul><book-add></book-add></div>',

            replace: true

        }

    })

    .directive('bookAdd',function () {

        return{

            restrict:'ECAM',

            require:'^bookList',//^代表向上找标签约束<book-add></book-add>

            template:'<button type="button">添加</button>',

            replace:true,

            link:function (scope, iElement, iAttrs, bookListController) {//把controllerAs: 'bookListController' 注入进来

                iElement.on('click',bookListController.addBook);

            }

        }

    })

    .controller('firstController', ['$scope', function ($scope) {

           //代表当前是给firstController服务的

    }]);

　　运行结果:

angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)的更多相关文章

  1. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

  2. angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. angularJS1笔记-(12)-自定义指令(compile/link)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  8. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  9. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

随机推荐

  1. GoLand（二）语言结构和基础语法

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Go语言结构1.Go语言有6大部分组成,分别是:包声明.引入包.函数.变量.语句或表达式.注释2.输出一个He ...

  2. docker 下 mysql 集群的搭建

    下载程序&&创建docker容器 从mysql官网https://dev.mysql.com/downloads/cluster/上下载mysql集群库mysql-cluster-gp ...

  3. 20155226 2016-2017-2 《Java程序设计》第9周学习总结

    20155226 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC简介 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商 ...

  4. [折半搜索][哈希]POJ1186方程的解数

    题目传送门 这道题明显N数据范围非常小,但是M很大,所以用折半搜索实现搜索算法的指数级优化,将复杂度优化到O(M^(N/2)). 将搜出的两半结果用哈希的方式合并(乘法原理). Code: #incl ...

  5. 【转载】Free Lunch is Over(免费午餐已经结束了)

    原文:Free Lunch is Over(免费午餐已经结束了) 微软C++大师Herb Sutter的文章<The Free Lunch Is Over>翻译,以前自己也经常翻译,但是都 ...

  6. 牛客网NOIP赛前集训营-提高组（第六场）B-选择题[背包]

    题意 题目链接 分析 直接背包之后可以 \(O(n)\) 去除一个物品的影响. 注意特判 \([p==1]\) 的情况. 总时间复杂度为 \(O(n^2)\) . 代码 #include<bit ...

  7. [VB.NET][C#]调用API获取或设置键盘按键状态

    前言 通过 C# 或 VB.NET,你只需编写少量的代码即可实现一个按键精灵. 第一节 接口 调用系统 API 实现获取或设置指定的按键状态. 获取按键状态 调用 GetAsyncKeyState() ...

  8. Win7搭建FTP服务器

    “控制面板” -> “程序和功能” -> “打开或关闭Windows 功能”: 1.展开“Internet 信息服务” 2.勾选“Internet Information Services ...

  9. 斐讯K2 PSG1218 刷机教程 基于Breed互刷 清除配置

    Padavan官方论坛http://www.right.com.cn/forum/thread-161324-1-1.html Breed官方文档http://www.right.com.cn/for ...

  10. Docker数据卷容器

    用户需要在多个容器之间共享一些数据,就可以使用数据卷容器   从阿里云仓库下载镜像(也可以自己制作一个基础进项,比如只有几M的alpine) sudo docker pull registry.cn- ...