Angular1.x复杂指令实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular1.x复杂指令实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8204字，纯文字阅读大概需要12分钟。
内容图文
本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考，具体如下：
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
var propertyName = attrs['listProperty'] || "price || currency";
if(angular.isArray(data)){
var listElem = angular.element("<ul>");
if(element[0].nodeName == "#comment"){
element.parent().append(listElem);
}else{
element.append(listElem);
}
for(var i=0, len=data.length; i<len; i++){
var itemElem = angular.element('<li>').text(scope.$eval(propertyName, data[i]));
listElem.append(itemElem);
}
}
},
restrict:'EACM'
};
});
如何使用指令
当作元素使用（E）
<unordered-list list-source="products" list-property="price | currency" />
当unordered-list当作元素使用，需要添加另外的属性代替unordered-list属性的作用。
var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
当作属性使用（A）
<div unordered-list="products" list-property="price | currency"></div>
当作类的属性值使用（C）
<div class="unordered-list: products" list-property="price | currency"></div>
当作注释使用（M）
<!-- directive: unordered-list products -->
使用模板指令
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
template:"<ul><li ng-repeat='item in data'>{{item.price | currency}}</li></ul>"
};
});
使用函数作为模板
template属性除了使用字符串，也可以指定一个函数来生成模板化的内容。该函数传入两个函数（指令所应用到的元素以及属性集合）并返回将被插入到文档中的HTML代码片段。
<script type="text/javascript" id="listTemplate">
<ul>
<li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
$scope.products = [
{ name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
{ name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
{ name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
];
}])
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
template:function () {
return angular.element(
document.querySelector("#listTemplate")
).html();
}
};
});
</script>
使用外部模板
itemTemplate.html
<p>This is the form the template file</p>
<ul>
<li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
templateUrl:"itemTemplate.html"
};
});
通过函数选择一个外部模版
tableTemplate.html
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
</tr>
</tbody>
</table>
<div unordered-list="products" template="table" class="table table-striped"> This is where the list will go </div>
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
templateUrl: function (elem, attrs) {
return attrs['template'] == "table" ? "tableTemplate.html" : "itemTemplate.html";
}
};
});
table-striped样式并没有起作用，设置replace属性为true后的效果是模版内容将替换掉指令所应用到的div元素。
管理指令的作用域
为每个指令实例创建自己的作用域
设置scope属性为true将允许我们在同一个控制器里复用这个指令,可以避免指令共享数据值。
<div class="panel panel-default"> <div class="panel-body" scope-demo></div> <div class="panel-body" scope-demo></div> </div>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
$scope.data = {name:"Staven"};
$scope.city = "China"
}])
.directive('scopeDemo', function () {
return {
template: function () {
return angular.element(document.querySelector("#scopeTemplate")).html();
},
scope:true
};
});
data.name这个属性是在一个对象上定义的，意味着这个值将会在指令的哥哥实例之间所共享，而且所有相应的视图会同步更新。
city是直接在控制器的作用于上被直接赋值的，意味着这个值只在此指令的作用域上有效。
创建隔离的作用域
对于在一个对象上定义的属性，可能会被其他人改变。解决方法就是创建一个隔离的作用域，就是Angularjs为指令的每个实例创建一个独立的作用域的地方，但是这个作用域并不继承自控制器的作用域。当scope定义属性被设置为一个对象时，可创建一个隔离的作用域。隔离的作用域的最基本类型是用一个没有属性的对象表示。
.directive('scopeDemo', function () {
return {
template: function () {
return angular.element(document.querySelector("#scopeTemplate")).html();
},
scope:{}
};
});
当创建在不同情况下复用的指令时，隔离的作用域是一种重要的构件时。因为它防止了在控制器作用域和指令之间出现了意料外的交互。但是完全隔绝一个指令会使得难以输入和输出数据。
隔绝的作用域允许使用应用于指令旁边的元素上的属性将数据值绑定到控制器作用域上。
单向绑定@：
向以@为前缀的作用域对象上增添一个属性，以在一个隔离的作用力创建一个单向绑定。
<body ng-app="myApp" ng-controller="myCtrl">
<div class="panel panel-default">
<div class="panel-body">
Direct Binding:<input ng-model="data.name" />
</div>
<div class="panel-body" scope-demo nameprop="{{data.name}}"></div>
</div>
</body>
<script type="text/ng-template" id="scopeTemplate">
<div class="panel-body">
<p>Data Value:{{local}}</p>
</div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
$scope.data = {name:"staven"};
}])
.directive('scopeDemo', function () {
return {
template: function () {
return angular.element(document.querySelector("#scopeTemplate")).html();
},
scope:{
local:"@nameprop"
}
};
});
</script>
local属性的值以@为前缀，制定了属性local的值应该从一个来自名为nameprop的特性的单向绑定来获得。
使用一个隔离的作用域使得指令不会继承控制器作用域中的数据。
双向绑定=：
向以=为前缀的作用域对象上增添一个属性，以在一个隔离的作用域里创建一个双向绑定。
在隔离作用于上的单向绑定总是被计算作字符串值，如果想访问一个数组，就必须使用双向绑定。
<div class="panel panel-default">
<div class="panel-body">
Direct Binding:<input ng-model="data.name" />
</div>
<div class="panel-body" scope-demo nameprop="data.name"></div>
</div>
<script type="text/ng-template" id="scopeTemplate">
<div class="panel-body">
<p>Data Value:<input ng-model="local" /></p>
</div>
</script>
<script>
scope:{
local:"=nameprop"
}
</script>
使用单向绑定时，提供了一个被"{{"和"}}"字符所包围的绑定表达式，但是angularjs需要知道在双向绑定中哪个属性需要被更新，所以不需要被"{{"和"}}"包围。
计算表达式&：
向以&为前缀的作用域对象上增添一个属性，在父作用域的上下文计算一个表达式。
<body ng-app="myApp" ng-controller="myCtrl">
<div class="panel panel-default">
<div class="panel-body">
Direct Binding:<input ng-model="data.name" />
</div>
<div class="panel-body" scope-demo city="getCity(data.name)" nameprop="data.name"></div>
</div>
</body>
<script type="text/ng-template" id="scopeTemplate">
<div class="panel-body">
<p>Name:{{local}}, City:{{cityFn()}}</p>
</div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
$scope.data = {name:"staven",defaultCity:"hefei"};
$scope.getCity = function (name) {
console.log(1);
return name == 'staven' ? $scope.data.defaultCity : "Unknown";
}
}])
.directive('scopeDemo', function () {
return {
template: function () {
return angular.element(document.querySelector("#scopeTemplate")).html();
},
scope:{
local:"=nameprop",
cityFn:"&city"
}
};
});
</script>
调用cityFn()时，使用了圆括号，要计算被这个特性所指定的表达式，这是必需的，即使当表达式本身就是一个函数调用时。
使用隔离作用域的数据来计算一个表达式
可以将来自代计算的隔离作用域的数据为控制器作用域表达式的一部分。
<div class="panel-body" scope-demo city="getCity(nameVal)" nameprop="data.name"></div>
<script type="text/ng-template" id="scopeTemplate">
<div class="panel-body">
<p>Name:{{local}}, City:{{cityFn({nameVal: local})}}</p>
</div>
</script>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的Angular1.x复杂指令实例详解全部内容，希望文章能够帮你解决Angular1.x复杂指令实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。