Angular1.x复杂指令实例详解

程序员文章站 2022-09-02 11:44:37

本文实例讲述了angular1.x复杂指令。分享给大家供大家参考，具体如下：名称...

本文实例讲述了angular1.x复杂指令。分享给大家供大家参考，具体如下：

名称	描述
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("<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程序设计有所帮助。

上一篇： AngularJS表格样式简单设置方法示例

下一篇： angular+bootstrap的双向数据绑定实例

Angular1.x复杂指令实例详解

详解Vue.js自定义tipOnce指令用法实例

AngularJS的ng-repeat指令与scope继承关系实例详解

Oracle解析复杂json的方法实例详解

Vue指令之 v-cloak、v-text、v-html实例详解

Angular1.x复杂指令实例详解

Vue的土著指令和自定义指令实例详解

AngularJS 指令的交互详解及实例代码

AngularJS 自定义指令详解及实例代码

AngularJS ng-bind-html 指令详解及实例代码

AngularJS ng-change 指令的详解及简单实例