angularJS 自定义指令 方法属性:controller 和属性:controllerAs

    自定义指令中还可以定义controller属性,是一个function,可以在其中定义数据和方法,可以提供给该指令的link内的方法使用。

示例的html:

<div ng-app="myApp">
    <div ng-controller="firstController">
        <div book-list></div>
    </div>
</div>
js:

angular.module('myApp',[])
.directive('bookList',function(){
    return {
        restrict:'ECAM',
        //此处定义了该指令的controller属性
        controller:function($scope){
            $scope.books=[
                {name:'php'},
                {name:'javascript'},
                {name:'java'}
            ];
            this.addBook=function(){       //或者 scope.addBook=...
                alert('test');
            }
        },
        controllerAs:'bookListController', //给当前controller起个名称
        template:'<ul><li ng-repeat="book in books">{{ book.name }}</li></ul>',
        replace:true,
        //link中注入 bookListController ,就可以使用它的方法了
        link:function(scope,iElement,iAttrs,bookListController){
            iElement.on('click',bookListController.addBook);
        }
    }
})
.controller('firstController',['$scope',function($scope){
}])
执行结果:



点击则触发了link定义的点击事件:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值