指令中的scope
一般而言,指令配置如下: //headBar.js
angular.module('app')
.directive('appHeadBar',function() {
return {
restrict: 'A',replace: true,templateUrl: 'view/template/headBar.html',scope: {
text: '@',},link: function(scope,element,attr) {
scope.back = function() {
window.history.back(); // 调用浏览器的api实现后退功能
}
}
}
})
// 指令对应的模板页面headBar.html
<div class="head ta-c p-r">
<span class="p-a c-w back-btn" ng-click="back();"><</span> // 绑定点击函数,在指令link函数中实现
<span class="c-w" ng-bind="text"></span>
</div>
除了这些之外,还有 指令中重要的是scope属性,默认是false,表示与父作用域是同一个作用域。如果设置为true,表示会从父作用域继承并创建一个新的作用域对象。 如果一个元素上有多个指令使用了隔离作用域,其中只有一个可以生效,所以最好不好这么做。只有指令模板的根元素可以获得一个新的作用域。 scope还有一个值是
这里会涉及到三个部分。 对@的举例// 1 父控制器中的html
<div app-head-bar text="公司职位"></div>
// 2
angular.module('app')
.directive('appHeadBar',function() {
return {
restrict: 'A',replace: true,scope: {
text: '@',}
})
// 3
<span class="c-w" ng-bind="text"></span>
对以上的解析是,指令的 对=的举例// 1 父作用域对应的是控制器companyCtrl
<div app-position-class com="company"></div>
angular.module('app')
.controller('companyCtrl',['$http','$state','$scope',function($http,$state,$scope) {
$http.get('data/company.json?id=' + $state.params.id)
.then(function(res) {
$scope.company = res.data; // company.positionClass是一个json数据,在指令对应的模板中引用了
})
}])
// 2
angular.module('app')
.directive('appPositionClass',[function() {
return {
restrict: 'A',templateUrl: 'view/template/positionClass.html',scope: {
com: '=' //可以看到,对应的是父作用域中的company属性
},}
}])
// 3
<button class="{{$index===isActive ? 'active' : ''}}" ng-repeat="cls in com.positionClass" ng-bind="cls.name"></button>
对以上的解析是,指令的 对&的举例// 1 父作用域对应的是控制器searchCtrl
<div app-tab tab-click="tClick(id,name)"></div>
angular.module('app')
.controller('searchCtrl',['dict','$http',function(dict,$http,$scope) {
var tabId = '';
$scope.tClick = function(id,name) { // tabClick
}
}])
// 2
angular.module('app')
.directive('appTab',[function() {
return {
restrict: 'A',replace: true,scope: {
list: '=',tabClick: '&'
},templateUrl: 'view/template/tab.html',link: function(scope) {
scope.click = function(tab) {
scope.selectId = tab.id;
scope.tabClick(tab);
}
}
}
}])
// 3
<ul class="tab">
<li class="d-ib ta-c" ng-repeat="item in list" ng-bind="item.name" ng-click="click(item)"></li>
</ul>
对以上的解析是,指令的 关于此,要注意的一点是在指令的定义中调用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |