controller && controllAs属性

controller 他会暴露一个API，利⽤用这个API可以在多个指令之间通过依赖注入进行通信
controller($scope,$element,$attrs,$transclude)
controllerAs 是给controller起个别名，方便使用
require 可以将其他指令传递给自己

选项

用法

directiveName

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

^directiveName

在父级查找指令

?directiveName

表示指令是可选的，如果找不到，不需要抛出异常

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">

        <div book-list>

        </div>

    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

app/index.js

angular.module('myApp', [])

    .directive('bookList', function () {
        return {
            restrict: 'ECAM',
            controller: function ($scope) {
                $scope.books = [
                    {
                        name: 'php'
                    },
                    {
                        name: 'javascript'
                    },
                    {
                        name: 'java'
                    }
                ];
                $scope.addBook = function(){

                }
                this.addBook = function(){
                    // ...
                }
            },
            controllerAs:'bookListController',
            template: '<ul><li ng-repeat="book in books">{{book.name}}</li></ul>',
            replace:true,
            link:function(scope,iEelement,iAttrs,bookListController){
                iEelement.on('click',bookListController.addBook)
            }
        }

    })

    .controller('firstController', ['$scope', function ($scope) {
        // console.log($scope);
    }]);

Previouscompile && link属性 Nextrequire属性

Last updated 5 years ago

Was this helpful?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div book-list> </div> </div> </div> <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script> <script type="text/javascript" src="app/index.js"></script> </body> </html>

angular.module('myApp', []) .directive('bookList', function () { return { restrict: 'ECAM', controller: function ($scope) { $scope.books = [ { name: 'php' }, { name: 'javascript' }, { name: 'java' } ]; $scope.addBook = function(){ } this.addBook = function(){ // ... } }, controllerAs:'bookListController', template: '<ul><li ng-repeat="book in books">{{book.name}}</li></ul>', replace:true, link:function(scope,iEelement,iAttrs,bookListController){ iEelement.on('click',bookListController.addBook) } } }) .controller('firstController', ['$scope', function ($scope) { // console.log($scope); }]);