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("");
        if(element[0].nodeName == "#comment"){
          element.parent().append(listElem);
        }else{
          element.append(listElem);
        }
        for(var i=0, len=data.length; i').text(scope.$eval(propertyName, data[i]));
          listElem.append(itemElem);
        }
      }
    },
    restrict:'EACM'
  };
});

如何使用指令

当作元素使用（E）

当unordered-list当作元素使用，需要添加另外的属性代替unordered-list属性的作用。

var data = scope[attrs['unorderedList'] || attrs['listSource'] ];

当作属性使用（A）

当作类的属性值使用（C）

.directive('unorderedList', function () { return { link: function (scope, element, attrs) { scope.data = scope[attrs['unorderedList']]; }, restrict: 'A', template:"

" }; });

template属性除了使用字符串，也可以指定一个函数来生成模板化的内容。该函数传入两个函数（指令所应用到的元素以及属性集合）并返回将被插入到文档中的HTML代码片段。

.directive('unorderedList', function () { return { link: function (scope, element, attrs) { scope.data = scope[attrs['unorderedList']]; }, restrict: 'A', templateUrl:"itemTemplate.html" }; });

Name	Price
{{item.name}}	{{item.price \| currency}}

Name

Price

.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"; } }; });

.directive('scopeDemo', function () { return { template: function () { return angular.element(document.querySelector("#scopeTemplate")).html(); }, scope:{} }; });

Direct Binding:

Data Value:{{local}}

Direct Binding:

Name:{{local}}, City:{{cityFn()}}

大橙子网站建设，新征程启航

Angular1.x复杂指令的示例分析

其他资讯