搞定angular1.x——自定义指令

最新推荐文章于 2023-03-08 17:48:23 发布

薄暮晓寒

最新推荐文章于 2023-03-08 17:48:23 发布

阅读量2.6k

点赞数

分类专栏： angularjs 文章标签： angular

本文链接：https://blog.csdn.net/stavencsdn/article/details/52604015

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

调用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" />
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <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])));
    }
}

薄暮晓寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搞定angular1.x——自定义指令

返回链式函数 lang="en"> charset="UTF-8"> AngularJS Demo rel="stylesheet" href="../css/bootstrap.css" /> rel="stylesheet" href="../css/bootstrap-theme.css"> src="../js/angular.js"> ng-ap
复制链接

扫一扫