在网上找到一个好的例子,初学自定义指令的可以看看:
本文摘要自:( http://www.cnblogs.com/powertoolsteam/p/angularjs-custom-directive.html)
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中启作用的表达式。它允许指令实现比修改值更高级的操作。
- name: "@" (值传递,单向绑定):
- 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)