【回忆1314】第一次用AngularJS

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

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

2.指令的多种调用方式

<!-- 定义指令，匹配过程(去掉'x-'、'data-'、转化':', ',' , '-', '_-'为驼峰式) -->

<my-hello></my-hello>
<div my-hello></div>
<!-- directive:my-hello -->
<div class="my-hello"></div>
<my:hello></my:hello>
<my_hello></my_hello>
<data-my-hello></data-my-hello>
<x-my-hello></x-my-hello>

3.service 与 controller、directive交互

<button add-book-button>Add book</button>

<ul ng-controller="books.list">
    <li ng-repeat="i in books">书名：{{i.title}}，作者：{{i.author}}</li>
</ul>

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交互

<!-- 控制器嵌套 -->
<div ng-controller="Ctrl1Parent">
    <p>{{text}}</p>
    <button ng-click="changeText()">控制器嵌套Parent</button>
    <div ng-controller="Ctrl1Child">
        <p>{{text}}</p>
        <button ng-click="changeText()">控制器嵌套Child</button>
    </div>
</div>

<!-- 控制器嵌套，向上传播 -->
<div ng-controller="Ctrl2Parent">
    <p>{{text}}</p>
    <div ng-controller="Ctrl2Child">
        <button ng-click="changeText()">向上传播</button>
    </div>
</div>

<!-- 控制器嵌套，向下传播 -->
<div ng-controller="Ctrl3Parent">
    <button ng-click="changeText()">向下传播</button>
    <div ng-controller="Ctrl3Child">
        <p>{{text}}</p>
    </div>
</div>

<!-- 控制器嵌套，兄弟传播 -->
<div ng-controller="Ctrl4Parent">
    <div ng-controller="Ctrl4Child">
        <p>{{text}}</p>
        <button ng-click="changeText()">兄弟传播</button>
    </div>
    <div ng-controller="Ctrl4Child">
        <p>{{text}}</p>
        <button ng-click="changeText()">兄弟传播</button>
    </div>
</div>

<!-- 服务 -->
<div ng-controller="Ctrl5Main">
    <input type="text" ng-model="test" />
    <div ng-click="add()">add</div>
</div>
<div ng-controller="Ctrl5Side">
    <div ng-click="get()">get {{name}}</div>
</div>

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;
        };
    });