指令中 controller && controllerAs

1, controller 他会暴露一个API，利用这个API可以在多个指令之间通过依赖注入进行通信。

    controller($scope, $element, $attrs, $tranclude)

2, controllerAs 是给controller起个别名，方便使用

3, require 可以将其他指令传给自己

   directiveName 通过驼峰法的命名指定了控制器应该带有哪一条指令，默认会从同一个元素的指令

   ^directiveName 在父即查找指令

   ?directiveName 表示指令可选的，如果找不到，不需要抛出移除

eg: 1

<div ng-controller="myCtrl">
    <div book-list></div>
    </div>


<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
    angular.module('myApp', [])
        .controller('myCtrl', ['$scope', function(scope){
            console.log(scope)
            scope.bookData = [
                { name : 'js'},
                { name : 'java'},
                {name : 'html+css'}
            ];
        }])
        .directive('bookList', function(){
            return {
                restrict : 'EAMC',
                replace : true,
                template : '<ul><li ng-repeat="item in bookData">{{item.name}}</li></ul>'
            }
        })
</script>

eg2:
    把控制器中的数据放到指令中的controller中
    angular.module('myApp', [])
        .controller('myCtrl', ['$scope', function(scope){
            
        }])
        .directive('bookList', function(){
            return {
                restrict : 'EAMC',
                replace : true,
                controller : function($scope){//可以在多个指令间通过依赖注入进行通信
                    //这里的$scope跟myCtl里面的$scope是一样的    
                    $scope.bookData = [ //把myCtrl里面的数据放到指令controller里面
                        { name : 'js'},
                        { name : 'java'},
                        {name : 'html+css'}
                    ];

                    this.add = function(){
                        alert(1)
                    }
                },
                controllerAs : "bookListCtrl",//跟指令中的controller起一个别名
                link : function($scope, element, attr, bookListCtrl){
                    bookListCtrl.add();
                },
                template : '<ul><li ng-repeat="item in bookData">{{item.name}}</li></ul>'
            }
        })