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",price: 2.42,expiry: 7 },{ name: "Pears",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标签，该标签的作用是：通过作用域数据模型的值，将其值以无序列表的方式展示出来
第三部：并且在单击加价按钮时，无序列表的值会依次递增

三、使用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,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 优雅的自定义指令

相关推荐