自定义指令实例

在网上找到一个好的例子，初学自定义指令的可以看看：

js代码

var myApp = angular.module("myApp", []);

// 添加 controller
myApp.controller("myCtrl", function($scope) {
    $scope.customerName = "葡萄城控件";
    $scope.credit = 8800;
    $scope.saveChanges = function(source) {
        alert("保存了来自" + source + "的变更");
    };
});

// 添加 directive
myApp.directive("myDir", function() {
  return {
    restrict:  "E",
    scope: {
      name: "@",   // name 值传递 （字符串，单向绑定）
      amount: "=", // amount 引用传递（双向绑定）
      save: "&"    // 保存操作
    },
    template: 
      "<div>" +
      "  {{name}}: <input ng-model='amount' />" +
      "  <button ng-click='save()'>保存</button>" +
      "</div>",
    replace: true,
    transclude: false,
   link: function (scope, element, attrs) {
        
        console.log("initial value for name:" + scope.name);
        console.log("initial value for amount:" + scope.amount);
        
        element.css("background", "yellow");

        scope.$watch("amount", function (newVal, oldVal) {
            console.log("amount has changed " + oldVal + " >> " + newVal);
        });
        

        scope.$watch("name", function (newVal, oldVal) {
            console.log("name has changed " + oldVal + " >> " + newVal);
        });
    }
  }
});

html代码：

<bodyng-app="myApp" ng-controller="myCtrl">
<h3>普通的 Angular</h3>
    {{customerName}}:
    <input ng-model="credit" />
    <button ng-click="saveChanges(' [普通的Angular] ')">保存</button>

    <h3>自定义指令</h3>
    <my-dir  name="{{customerName}}" amount="credit"
        save="saveChanges(' [自定义指令] ')">
    </my-dir>
</body>

restrict: 说明指令在HTML中的应用形式，备选项有"A"、"E" 和 "C"， "M" ，分别代表 attribute、element、class和comment（默认值为"A"）。我们将更多的关注attributes-如何创建UI元素。
scope: 创建指令的作用范围，scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
- name: "@" （值传递，单向绑定）：
  "@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改，是最常用的变量。
- amount: "=" （引用,双向绑定）
  "="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的，包括复合对象和数组。指令可以更改父级Scope中的值，所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
- save: "&" (表达式)
  “&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。
template: 替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style 风格指令。replace: 说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false，这时原始标记将被保留。
transclude: 说明自定义指令是否复制原始标记中的内容。例如，之前展示的“tab”指令设置了transclude 为 true，因为tab 元素包含其他HTML 元素。 "dateInput" 指令则需要在初始化时为空，所以需要设置transclude 为false。
link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件监听器等。link 方法包含以下参数：
- scope: 指令Scope的引用。scope 变量在初始化时是不被定义的，link 方法会注册监视器监视值变化事件。
- element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jQuery，还可以使用Angular's jqLite ）。
- controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互，

本文摘要自：（ http://www.cnblogs.com/powertoolsteam/p/angularjs-custom-directive.html）

猜你喜欢