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. Lua 语言学习

    详细讲解见菜鸟教程 Lua. 一.数据类型 -- 直接输出 print("hello") -- 全局变量 b = print(b) -- nil(空) print(type(a)) ...

  2. 20145209刘一阳《JAVA程序设计》第八周课堂测试

    第八周课堂测试 1.下面代码中共有(C)个线程? public class ThreadTest { public static void main(String args[]){ MyThread ...

  3. mfc 引用

    一.引用的概念 引用(reference)是另一标识符的别名,可以说是C++的一种新的变量类型,是对C的重要扩充.当建立引用时,程序用另一个变量或对象(目标)的名字初始化它(即它代表了标识符的左值), ...

  4. 【转载】COM 组件设计与应用（十）——IDispatch 接口 for VC.NET

    原文:http://vckbase.com/index.php/wv/1225.html 一.前言 终于写到了第十回,我也一直期盼着写这回的内容耶,为啥呢?因为自动化(automation)是非常常用 ...

  5. 【SDOI2011】工作安排

    题面 题解 如果没有分段函数的限制的话就很好做了 但是我们发现分段函数的段很少,我们就可以将每一段拆开, 强制限制一定流量就可以了 代码 #include<cstdio> #include ...

  6. 2_C语言中的数据类型 （三）原码、反码、补码

    1.1       原码 将最高位做为符号位(0代表正,1代表负),其余各位代表数值本身的绝对值 +7的原码是00000111 -7的原码是10000111 +0的原码是00000000 -0的原码是 ...

  7. 解决 spring-test 出现 Failed to load ApplicationContext 的异常

    在使用spring-test的时候,在启动@Test的方法时,spring-test会去加载spring的配置文件,这个时候如果配置文件没有在 @ContextConfiguration 中写全,就会 ...

  8. 用C链表实现约瑟夫环问题

    问题:设有n个人围成一个圆圈,现从第s个人开始报数,数到第m的人出列,然后从出列的下一个人重新开始报数,数到第m的人再次出列,如此反复,直到所有的人全部出列为止.对于任意给定的n.s.m,求按出列次序 ...

  9. Ansible 连接主机显示报错的处理方案

    一.在ansible安装完毕后一般需要以SSH的方式连接到需要进行管理的目标主机,一开始遇到了如下问题: 192.168.15.4 | UNREACHABLE! => {    "ch ...

  10. Openstack逻辑架构

    一. Keystone  -身份认证管理 提供了认证和授权的服务,openstack不同的组件通信都要经过授权,确保正确的用户和服务是经过认证的.并且它集成了大量的认证机制,比如用户名/密码和令牌/基 ...