您的位置：首页 > Web前端 > AngularJS

angularJS 自定义指令属性：require

2016-10-21 17:41 381 查看

示例展示一个指令的template中使用到了另一个指令的例子。

示例html:

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

js:

angular.module('myApp',[])
//定义第一个指令 bookList
.directive('bookList',function(){
return {
restrict:'ECAM',
controller:function($scope){
$scope.books=[
{name:'php'},{name:'javascript'},{name:'java'}
];
this.addBook=function(){
$scope.$apply(function(){
$scope.books.push({name:'Angularjs'});
});
}
},
controllerAs:'bookListController',
//这个template中使用了第二个指令bookAdd
template:'<div><ul><li ng-repeat="book in books">{{ book.name }}</li></ul> <book-add></book-add> </div>',
replace:true
}
})
//定义第二个指令 bookAdd
.directive('bookAdd',function(){
return{
restrict:'ECAM',
require:'^bookList',
template:'<button type="button">添加</button>',
replace:true,
link:function(scope,iElement,iAttrs,bookListController){  //这里引用了bookList指令
iElement.on('click',bookListController.addBook);
}
}
})
.controller('firstController',['$scope',function($scope){
}])

执行结果：

点击“添加”：

再点击“添加”两次：

示例中，在bookAdd指令中设置了 require : ' ^bookList ' ，指示该指令引用了bookList指令，^ 指示在父级元素查找bookList指令：

下面改进上面的例子，可以输入书名添加：

执行结果：

html和js:

<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<book-list></book-list>
</div>
</div>
<script>
angular.module('myApp',[])
.directive('bookList',function(){
return {
restrict:'E',
template:'<div><ul><li ng-repeat="book in books">{{ book.name }}</li></ul><book-add></book-add></div>',
replace:true,
controller:function($scope){
$scope.books=[
{name:'book01'},{name:'book02'},{name:'book03'}
];
this.addBook=function(name){
if(typeof(name)=='undefined' || name.length<1){alert('书名不可为空！');return;}
$scope.$apply(function(){
var exist=false;
angular.forEach($scope.books,function(ele,i){
if(ele.name == name){
exist=true;
return;
}
});
if(exist){alert('该书已经存在！')}else{
$scope.books.push({name:name});
}
});
}
},
controllerAs:'bookListController'
}
})
.directive('bookAdd',function(){
return {
restrict:'E',
template:'<div><input type="text" placeholder="书名" ng-model="newBookName"><button type="button">添加</button></div>',
replace:true,
require:'^bookList',
link:function(scope,iElement,iAttrs,bookListController){
iElement.find('button').on('click',function(){
bookListController.addBook(scope.newBookName);
})
}
}
})
.controller('myCtrl',function($scope){});
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

angularJS 自定义指令 属性：require

angularJS 自定义指令属性：require