AngularJS 优雅的自定义指令

学习要点

  • 为什么使用指令
  • 创建自定义指令
  • 使用jqLite工作

一、为什么使用自定义指令
NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性。
二、自定义指令
接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="defaultCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div class="panel-body">
            <!-- 点击加价,价格递增 -->
            <button type="button" class="btn btn-primary" ng-click="incrementPrices()">加价</button>
        </div>
        <div class="panel-body">
            <!-- 将products数据以一种无序列表的形式展示 -->
            <!-- list-property="price | currency" 列表项单位本地化 -->
            <div unorderlist="products" list-property="price | currency"></div>
        </div>
    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript"> angular.module("exampleApp", []) .directive("unorderlist", function () { // scope 作用域 // element 应用该指令的元素 // attrs 使用该指令的元素的属性 return function (scope, element, attrs) { // attrs['unorderlist'] 获取unorderlist属性值,这里为products // 获取数据模型值,这里为scope.products var data = scope[attrs['unorderlist']]; // 创建一个<ul>标签元素 var ul = angular.element("<ul>"); // 在应用该指令的元素中添加<ul> element.append(ul); // 获取listProperty属性值,这里为price | currency var expression = attrs['listProperty']; // 判断是否为数组 if (angular.isArray(data)) { // 遍历数据模型scope.products for (var i = 0; i < data.length; i++) { // 添加闭包,将i传递进去 (function (index) { // 创建一个<li>标签元素 var li = angular.element("<li>"); // 将<li>标签添加到<ul>中 ul.append(li); // 监听器函数,用$eval计算表达式和data[index]的值 var watcherFn = function (watchScope) { return watchScope.$eval(expression, data[index]); } // 添加$watch监听器监听作用域的变化 scope.$watch(watcherFn, function (newValue, oldValue) { // 更新li的值 li.text(newValue); }) })(i); } } } }) .controller("defaultCtrl", 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 } ]; // 递增价格 $scope.incrementPrices = function () { for (var i = 0; i < $scope.products.length; i++) { $scope.products[i].price++; } } }) </script>
</body>
</html>

解析:
第一步:创建控制器,添加数据模型products和递增价格incrementPrices()方法
第二步:自定义unorderlist标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来
第三部:并且在单击加价按钮时,无序列表的值会依次递增
AngularJS 优雅的自定义指令_第1张图片

三、使用jqLite工作
NG内置了jqLite,它是JQuery的缩小版


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default">
        <!-- 使用自定义指令 -->
        <ol dome-directive>
            <li>Apples</li>
            <ul>
                <li>Bananas</li>
                <li>Cherries</li>
                <li>Oranges</li>
            </ul>
            <li>Pears</li>
            <li>Oranges</li>
        </ol>
    </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript"> angular.module("exampleApp", []) .directive("domeDirective", function () { return function (scope, element, attrs) { // 找出element元素下所有的li,这里的element是调用者<ol> var items = element.find("li"); // 要所有的li的font-weight为bold items.css("font-weight", "bold"); // 遍历li, 值为Oranges的字体颜色为red,其余为green for (var i = 0; i < items.length; i++) { if (items.eq(i).text() == "Oranges"){ items.eq(i).css("color", "red"); } else { items.eq(i).css("color", "green"); } } // 打印出li的长度和字体颜色 console.log("Items length : " + items.length); console.log("Color: " + items.css("color")); } }) </script>
</body>
</html>

解析:
第一步:自定义控制器,定义数据模型names
第二步:自定义指令,功能是将使用指令的元素下的所有li找出,并且更加值的不同赋给字体不同的颜色
第三步:在视图中调用并且使用指令
AngularJS 优雅的自定义指令_第2张图片

你可能感兴趣的:(AngularJS,监听器,闭包,自定义指令,jqLite)