1.创建指令的4种方式（ECMA）

var appModule = angular.module('app', []);appModule.directive('hello', function(){    return {        /**         * E 元素         * C class         * M 注释 directive:hello         * A 属性 默认         */        restrict: 'ECMA',        template: '
     
      hello world.
     
',        replace: true    };});

2.指令的多种调用方式

3.service 与 controller、directive交互

Add book
     
    
      
书名：{
   {i.title}}，作者：{
   {i.author}}
     

var appModule = angular.module('app', []);    // service 单例，共享数据    appModule.service('Book', ['$rootScope', function($root){        var service = {            books: [                {                    "title": "书名1",                    "author": "作者1"                },                {                    "title": "书名2",                    "author": "作者2"                }            ],            addBook: function(book){                service.books.push(book);                // 给root下所有的books.update派发事件                $root.$broadcast('books.update');            }        };        return service;    }]);    // 在控制器里使用Book服务    appModule.controller('books.list', ['$scope', 'Book', function(scope, Book){        scope.books = Book.books;        scope.$on('books.update', function(){            scope.$apply(function(){                scope.books = Book.books;            });        });    }]);    // 在指令里使用Book服务    appModule.directive('addBookButton', ['Book', function(Book){        return {            restrict: 'A',            link: function(scope, el){                var n = 0;                el.bind('click', function(){                    Book.addBook({                        "title": "新书"+(++n),                        "author": "新作者"+n                    });                });            }        };    }]);

4.controller 与 controller交互

     
     
    
      
{
   {text}}
    
      控制器嵌套Parent    
      
        
       
{
   {text}}
        
       控制器嵌套Child    
      
     
     
     
    
      
{
   {text}}
    
      
        
       向上传播    
      
     
     
     
    
      向下传播    
      
        
       
{
   {text}}
    
      
     
     
     
    
      
        
       
{
   {text}}
        
       兄弟传播    
      
    
      
        
       
{
   {text}}
        
       兄弟传播    
      
     
     
     
    
          
      
       add
      
     
     
    
      
       get {
   {name}}
      
     

var appModule = angular.module('app', []);    // 控制器与控制器交互 -> 控制器嵌套    appModule.controller('Ctrl1Parent', ['$scope', function(scope){        scope.text = 'hello';        scope.changeText = function(){            scope.text = 'parent';        };    }]);    appModule.controller('Ctrl1Child', ['$scope', function(scope){        scope.changeText = function(){            scope.text = 'child';        };    }]);    /**     * $on          绑定事件     * $emit        向上传递事件(冒泡)     * $boardcast   向下传递事件(捕获)     */    // 控制器与控制器交互 -> 事件传播（控制器嵌套，向上传播）    appModule.controller('Ctrl2Parent', ['$scope', function(scope){        scope.text = 'parent';        scope.$on('changeText', function(ev, text){            scope.text = text;        });    }]);    appModule.controller('Ctrl2Child', ['$scope', function(scope){        scope.changeText = function(){            scope.$emit('changeText', 'child');        };    }]);    // 控制器与控制器交互 -> 事件传播（控制器嵌套，向下传播）    appModule.controller('Ctrl3Parent', ['$scope', function(scope){        scope.text = 'parent';        scope.changeText = function(){            scope.$broadcast('changeText', 'child');        };    }]);    appModule.controller('Ctrl3Child', ['$scope', function(scope){        scope.$on('changeText', function(ev, text){            scope.text = text;        });    }]);    // 控制器与控制器交互 -> 事件传播（同级传播）    appModule.controller('Ctrl4Parent', ['$scope', function(scope){        // 绑定一个changeTextAll事件，它被触发时会向子作用域发布changeTextExe        scope.$on('changeTextAll', function(){            scope.$broadcast('changeTextExe');        });    }]);    appModule.controller('Ctrl4Child', ['$scope', function(scope){        scope.text = 'parent';        // 触发父控制器的changeTextAll事件，得到changeTextExe        scope.changeText = function(){            scope.$emit('changeTextAll');        };        // changeTextExe发生        scope.$on('changeTextExe', function(){            scope.text = 'changeTextExe';        });    }]);    // 以服务的方式交互    appModule.factory('instance', function(){        return {};    });    appModule.controller('Ctrl5Main', function($scope, instance){        $scope.add = function() {            instance.name = $scope.test;        };    });    appModule.controller('Ctrl5Side', function($scope, instance){        $scope.get = function() {            $scope.name = instance.name;        };    });