欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular1.x自定义指令实例详解

程序员文章站 2022-04-29 08:34:21
本文实例讲述了angular1.x自定义指令。分享给大家供大家参考,具体如下: 调用module.directive方法,传入指令名称和工厂函数,返回一个对象。 指令名...

本文实例讲述了angular1.x自定义指令。分享给大家供大家参考,具体如下:

调用module.directive方法,传入指令名称和工厂函数,返回一个对象。

指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的。

var myapp = angular.module('myapp', [])
  .directive("unorderedlist", function () {
    return function(scope, element, attrs) {
    };
  });

返回链式函数

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>angularjs demo</title>
  <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" >
  <script src="../js/angular.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3>products</h3>
    </div>
    <div class="panel-body">
      <div unordered-list="products"></div>
    </div>
  </div>
</body>
<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 function (scope, element, attrs) {
      var data = scope[attrs['unorderedlist']];
      if( angular.isarray(data) ){
        for(var i=0, len=data.length; i<len; i++){
          console.log(data[i].name);
        }
      }
    };
  });
</script>
</html>

打破对数据属性的依赖

设置一个元素属性,用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的,angularjs会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listproperty。

<div unordered-list="products" list-property="name"></div>
var data = scope[attrs['unorderedlist']];
var propertyname = attrs['listproperty'];
if(angular.isarray(data)){
  var listelem = angular.element("<ul>");
  element.append(listelem);
  for(var i=0, len=data.length; i<len; i++){
    listelem.append( angular.element('<li>').text(data[i][propertyname]) );
  }
}

计算表达式

<div unordered-list="products" list-property="price | currency"></div>

添加过滤器后,自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数:要计算的表达式和需要用于执行该计算的任意本地数据。

listelem.append( angular.element('<li>').text(scope.$eval(propertyname, data[i])) );

处理数据变化

<div class="panel-body">
  <button class="btn btn-primary" ng-click="incrementprices()">
    change prices
  </button>
</div>
$scope.incrementprices = function () {
  for(var i=0,len = $scope.products.length; i<len; i++){
    $scope.products[i].price++;
  }
}

添加监听器

if(angular.isarray(data)){
  var listelem = angular.element("<ul>");
  element.append(listelem);
  for(var i=0, len=data.length; i<len; i++){
    var itemelem = angular.element('<li>');
    listelem.append(itemelem);
    var watchfn = function (watchscope) {
      return watchscope.$eval(propertyname, data[i]);
    };
    scope.$watch(watchfn, function (newvalue, oldvalue) {
      itemelem.text(newvalue);
    });
  }
}

第一个函数(监听器函数)基于作用域中的数据计算出一个值,该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化,处理函数就会被调用,这个过程就像字符串表达式方式一样。提供一个函数来监听,能够从容地面对表达式中有可能带有过滤器的数据值得情形。

第二个监听器函数是针对$eval()计算的表达变化,来执行回调函数的。

以上代码并不能正确显示,涉及到for循环闭包问题。

for(var i=0, len=data.length; i<len; i++){
  (function () {
    var itemelem = angular.element('<li>');
    listelem.append(itemelem);
    var index = i;
    var watchfn = function (watchscope) {
      return watchscope.$eval(propertyname, data[index]);
    };
    scope.$watch(watchfn, function (newvalue, oldvalue) {
      itemelem.text(newvalue);
    });
  }());
}

或者

(function (i) {
  var itemelem = angular.element('<li>');
  listelem.append(itemelem);
  var watchfn = function (watchscope) {
    return watchscope.$eval(propertyname, data[i]);
  };
  scope.$watch(watchfn, function (newvalue, oldvalue) {
    itemelem.text(newvalue);
  });
})(i);

jqlite

jqlite中element()append()等方法的参数是html string or domelement。

return function (scope, element, attrs) {
  var listelem = element.append("<ol>");
  for (var i = 0; i < scope.names.length; i++) {
    listelem.append("<li>").append("<span>").text(scope.names[i]);
  }
}

上述添加的是字符串,最后添加只有scope.names中最后一条信息。

return function (scope, element, attrs) {
  var listelem = angular.element("<ol>");
  element.append(listelem);
  for (var i = 0; i < scope.names.length; i++) {
    listelem.append(angular.element("<li>")
        .append(angular.element("<span>").text(scope.names[i])));
  }
}

更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结

希望本文所述对大家angularjs程序设计有所帮助。