指令中 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>'
            }
        })

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }