AngularJS 大雅之堂的指令

学习要点：

嵌入包含
在指令中使用控制器
自定义表单元素

一、嵌入包含
嵌入包含是指将一个文档的一部分通过引用插入到另一个文档中
使用嵌入包含需要两个特定的步骤：
第一步：在创建指令时将transclude定义属性设置为true
第二步：将ng-transclude指令使用到模板中，就放入想插入被包装元素的地方

1.先看一个案例

 <!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 ng-controller="defaultCtrl"> <!-- 将panel标签中的内容放入到下面模板的panel-body中 --> <panel> The data value comes from the: {{dataSource}} </panel> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/ng-template" id="template"> <div class="panel panel-default"> <div class=" panel-heading"> <h4>This is the panel</h4> </div> <div class=" panel-body" ng-transclude> <!-- 在此处插入想插入的元素，即上面定义的<panel>标签--> </div> </div> </script> <script type="text/javascript"> angular.module("exampleApp",[]) .directive("panel",function () { return { // link : 为指令指定连接函数 link: function (scope,element,attrs) { scope.dataSource = "directive"; },// restrict : 指定指令如何使用 ECMA 元素、类、注释和属性,类和注释一般不用 restrict : "E",// 为每个实例创建一个作用域----但这里是被嵌入包含中的表达式 // 当为true时，scope.dataSource==controller // 当为false时，scope.dataSource==directive // 因为被嵌入包含的内容中的表达式是在控制器作用域被计算的，并非指令的作用域 scope : true,// 指定指令模板 template : function () { return angular.element(document.querySelector("#template")).html(); },// transclude : 指定指令是否被用于包含任意内容 transclude : true } }) .controller("defaultCtrl",function ($scope) { $scope.dataSource = "controller"; }) </script> </body> </html>

注意：在嵌入的内容中我们使用了内联的数据绑定

The data value comes from the: {{dataSource}}

这样做主要说明的是：被嵌入包含内容中的表达式是在控制器中被计算的，并非在指令的作用域。
这句话的意思就是：上述的dataSource的值直接受控制器的影响，而不是受指令作用域的影响。在本案例中，控制器的dataSource=controller，在指令中dataSource=directive，显然dataSource最终显示为controller

当然，如果你想让指令作用域也在考虑之内，那么可以将定义指令中的scope设置为false

2.使用编译函数
什么时候使用编译函数？
当指令特别复杂或者需要处理大量数据的时候，我们可以使用编译函数操作DOM，而让链接函数执行其他任务。这样不仅提高性能，而且可以使用嵌入包含来重复生成内容的能力

<!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 ng-controller="defaultCtrl" class="panel panel-body"> <table class="table table-striped"> <thead><tr><th>Name</th><th>Price</th></tr></thead> <tbody> <tr simple-repeater source="products" item-name="item"> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> </tr> </tbody> </table> <!-- 单击按钮，添加商品，提高价格 --> <buton class="btn btn-default text" ng-click="changeData()">Change</buton> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("exampleApp",[]) .directive("simpleRepeater",function () { return { // 隔离作用域，且进行数据绑定 scope : { // 双向数据绑定 data : "=source",// 单向数据绑定 propName : "@itemName" },// element : 表示元素本身被包括到嵌入内容中，并非是其内容 transclude : 'element',// 编译函数 compile : function (element,attrs,transcludeFn) { return function ($scope,$element,$attr) { // 添加监听器，当产品的数量发生改变，就会触发后面的工厂函数 $scope.$watch("data.length",function () { // 移除子元素 var parent = element.parent(); parent.children().remove(); for (var i = 0; i < $scope.data.length; i++) { // 创建一个新的作用域 var childScope = $scope.$new(); // 赋予每个实例item属性 childScope[$scope.propName] = $scope.data[i]; // 进行克隆数据 transcludeFn(childScope,function (clone) { parent.append(clone); }) } }) } } } }) .controller("defaultCtrl",function ($scope) { // 数据模型 $scope.products = [ { name: "Apples",price: 1.20 },{ name: "Bananas",price: 2.42 },{ name: "Pears",price: 2.02 } ]; // 添加商品，递增价格 $scope.changeData = function () { $scope.products.push({ name : "Peas",price : 4.02}); for ( var i = 0; i < $scope.products.length; i++) { $scope.products[i].price++; } } }) </script> </body> </html>

二、在指令中使用控制器
指令中可以创建被其他指令所用的控制器

 <!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 ng-controller="defaultCtrl"> <div class="panel panel-default"> <!-- 嵌入内容ng-transclude --> <!-- 双向数据绑定 product-table="totalValue"（绑定产品） product-data="products"（绑定产品质量和） --> <table class="table table-striped" product-table="totalValue" product-data="products" ng-transclude> <tr><th>Name</th><th>Quantity</th></tr> <tr ng-repeat="item in products" product-item></tr> <tr><th>Total:</th><td>{{totalValue}}</td></tr> <!-- 嵌入内容ng-transclude --> <!-- 双向数据绑定 product-data="products"（绑定产品） property-name="quantity" --> <tr reset-totals product-data="products" property-name="quantity"></tr> </table> </div> <script type="text/javascript" src="js/angular.min.js"></script> <!-- 定义模板 --> <script type="text/ng-template" id="productTpl"> <td>{{item.name}}</td> <td><input ng-model='item.quantity' /></td> </script> <script type="text/ng-template" id="resetTpl"> <td colspan="2"><button ng-click="reset()">Reset</button></td> </script> <script type="text/javascript"> angular.module("exampleApp",[]) .directive("productItem",function () { return { template : document.querySelector("#productTpl").outerText,// 声明对某个控制器的依赖，这里是productTable指令中的控制器 // require属性值的前缀 // None 表示假定两个指令都应用于同一元素 // ^ 表示在指令所应用到的元素的父元素上查找另一个指令 // ? 表示如果找不到指令就不报错 require : "^productTable",link : function (scope,ctrl) { scope.$watch("item.quantity",function () { // 使用productTable 指令中的控制器 ctrl.updateTotal(); }); } } }) .directive("productTable",function () { return { transclude : true,scope: { // 这里的value表示计算的产品数量和 value : "=productTable",// 这里的data相当于控制器中的products data : "=productData" },// 创建控制器，可以被另外的两个指令使用 // 功能：累计求产品数量和 controller : function ($scope,$attrs) { this.updateTotal = function () { var total = 0; for (var i = 0; i < $scope.data.length; i++ ) { total += Number($scope.data[i].quantity); } $scope.value = total; } } } }) .directive("resetTotals",function () { return { scope : { // 这里的data相当于控制器中的products data : "=productData",// 这里的propname，相当于products.quantity propname : "@propertyName" },template : document.querySelector("#resetTpl").outerText,require : "^productTable",ctrl) { scope.reset = function () { for (var i = 0; i < scope.data.length; i++) { scope.data[i][scope.propname] = 0; } // 使用productTable 指令中的控制器 ctrl.updateTotal(); } } } }) .controller("defaultCtrl",function ($scope) { $scope.products = [ { name: "Apples",price: 1.20,quantity: 2 },price: 2.42,quantity: 3 },price: 2.02,quantity: 1 } ]; }) </script> </body> </html>

三、创建自定义表单元素

<!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 ng-controller="defaultCtrl">
    <div><tri-button ng-model="dataValue"/></tri-button></div>
    <div class="well">
        Value : 
        <select ng-model="dataValue">
            <option>Yes</option>
            <option>Not</option>
            <option>Not Sure</option>
            <option>Huh?</option>
        </select>
    </div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="triTpl"> <div class="well"> <div class="btn-group"> <button class="btn btn-default">Yes</button> <button class="btn btn-default">Not</button> <button class="btn btn-default">Not Sure</button> </div> </div> </script>
<script type="text/javascript"> angular.module("exampleApp",[]) .controller("defaultCtrl",function ($scope) { $scope.dataValue = "Not Sure"; }) .directive("triButton",function () { return { // 表示该指令只能被当作元素使用 restrict : "E",// 声明了对ng-model的依赖 require : "ngModel",// 调用模板--生成内容 template : document.querySelector("#triTpl").outerText,// 链接函数 // ctrl应用指令的元素的抽象集合 link : function (scope,ctrl) { // 为每个按钮元素添加点击事件 // $scope.dataValue 的值随按钮值的变化 element.on("click",function (event) { scope.$apply(function () { // $setViewValue : 更新数据绑定的值 ctrl.$setViewValue(event.target.innerText); }); }); // $formatters : 将$modelValue 转成 $viewVlaue的格式化函数构成的数组 // $modelValue 表示从作用域返回为格式化的值 // $viewValue 表示返回应当被指令显示的格式化后的值 ctrl.$formatters.push(function (value) { return value == "Huh?" ? "Not Sure" : value; }); // 函数表达式 // 为选择的按钮添加样式 var setSelected = function (value) { var buttons = element.find("button"); buttons.removeClass("btn-primary"); for ( var i = 0; i < buttons.length; i++) { if (buttons.eq(i).text() == value) { buttons.eq(i).addClass("btn-primary"); } } } // $render : 这是当数据绑定的值发生变化时NgModel控制器调用更新UI的函数 ctrl.$render = function () { // $viewValue : 返回应当被指令显示的格式化后的值 setSelected(ctrl.$viewValue || "Not Sure"); } } } }) </script>
</body>
</html>

AngularJS 大雅之堂的指令

相关文章