精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Angular1.x复杂指令的示例分析
这篇文章主要介绍了Angular1.x复杂指令的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有文安免费网站建设让你可以放心的选择与我们合作。
具体如下：
名称 | 描述 | compile | 指定一个编译函数 |
controller | 为指令创建一个控制器函数 |
link | 为指令指定链接函数 |
replace | 指定模板内容是否替换指令所应用到的元素 |
require | 声明对某个控制器的依赖 |
restrict | 指定指令如何使用ACEM |
scope | 为指令创建一个新的作用域或者一个隔离的作用域 |
template | 指定一个将被插入到HTML文档的模板 |
templateUrl | 指定一个将被插入到HTML文档的外部模板 |
transclude | 指定指令是否被用于包含任意内容 |
.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(" 当作类的属性值使用（C）
当作注释使用（M）
使用模板指令
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
template:"{{item.price | currency}}
"
};
});
使用函数作为模板
template属性除了使用字符串，也可以指定一个函数来生成模板化的内容。该函数传入两个函数（指令所应用到的元素以及属性集合）并返回将被插入到文档中的HTML代码片段。
{{item.price | currency}}
使用外部模板
itemTemplate.html
This is the form the template file
{{item.price | currency}}
.directive('unorderedList', function () {
return {
link: function (scope, element, attrs) {
scope.data = scope[attrs['unorderedList']];
},
restrict: 'A',
templateUrl:"itemTemplate.html"
};
});通过函数选择一个外部模版
tableTemplate.html
| Name |
Price |
{{item.name}} |
{{item.price | currency}} |
This is where the list will go
.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将允许我们在同一个控制器里复用这个指令,可以避免指令共享数据值。
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:{}
};
});当创建在不同情况下复用的指令时，隔离的作用域是一种重要的构件时。因为它防止了在控制器作用域和指令之间出现了意料外的交互。但是完全隔绝一个指令会使得难以输入和输出数据。
隔绝的作用域允许使用应用于指令旁边的元素上的属性将数据值绑定到控制器作用域上。
单向绑定@：
向以@为前缀的作用域对象上增添一个属性，以在一个隔离的作用力创建一个单向绑定。
Direct Binding:
