AngularJS自定义Directive初体验
通常我们这样定义个module并随之定义一个controller.
var app = angular.module('myApp', []); app.controller('CustomersController', ['$scope', function($scope){ var counter = 0; $scope.customer = { name:'', street:'' }; $scope.customers = [ { name:'', street:'' }, ... ]; $scope.addCustomer = function(){ counter++; $scope.customers.push({ name:'' + counter, street: coutner + '' }); $scope.changeData = function(){ counter++; $scope.customer = { name: '', street:counter + '' }; } } }]);
■ 使用ng-include引用子视图
在一个子视图中可以使用CustomersController，子视图的名称是：child.html
Name:{{customer.Name}}
Street:{{customer.street}}
然后在一个主视图中比如是index.html使用子视图：
<div ng-include="child.html"></div>
■ 初识自定义directive
如果使用自定义directive也可以做到。
angular.module('myApp').directive('myInfo', function(){
return{
template:'Name:{customer.name}<br/>Street:{{customer.street}}'
};
})
在index.html主视图中可以这样使用自定义的directive。
<div my-info></div>
为什么myInfo到了视图中变成了my-info?这是一个惯例，比如我们经常用到的ng-repeat,在AngularJS中的源代码中是ngRepeat。还有，为什么，自定义的名称为myInfo的directive可以使用CustomersController的scope呢？因为主视图index.html中使用了CustomersController,而同在index.html视图中的<div my-info></div>共享了CustomersController的scope。
directive通常的用法包括如下：
angular.module('modulename')
.directive('myDirective', function(){
return {
restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注释
scope:{
title: '@' //@读属性值，=双向绑定，&用户函数
}
template: '<div>{{myVal}}</div>',
templateUrl: 'app/sample.html',
controller: 'myController',
link:function($scope, element, attrs){}//DOM操作
};
})
■ 自定义direcitve操作DOM元素
app.directive('myDomDirective', function(){
return {
link: function($scope, ele, attrs){
ele.bind('click', function(){
ele.html('');
});
ele.bind('mouseenter', function(){
ele.css('background-color','red');
});
ele.bind('mouseleave', function(){
ele.css('background-color','white');
});
}
};
});
在页面中这样使用：
<div my-dom-directive></div>
■ 封闭自定义directive的scope
默认情况下，自定义的directive的会共享父scope，但是，有时候我们希望自定义的directive的scope是封闭的、独立的，比如希望自定义的direcitve被用在多处。
只需要加上scope属性就好了，如下：
angular.module('myDirecitve', function(){
return {
scope:{},
template: ''
}
});
scope属性接受一个对象，在该对象中可以定义独立scope内的属性，而属性值的写法有三种，分别是@,=,&
● 使用@，外部scope赋值不影响封闭scope中的变量
angular.module('myApp').directive('myIsolateScopeWithName', function(){
return {
scope:{
name: '@'
},
template: 'Name:{{name}}',
controller: 'MyController'
};
});
在封闭的scope中定义了一个name变量，占位符@表示这里接受一个值。
如何给这里的变量赋值呢？
一种是把name成为一个属性来接收值：
<div my-isolated-scope-with-name name="{{ customer.name }}"></div>
一种是在MyController中给name赋值：
$scope.name = '';
如果把name="{{ customer.name }}"改成myname="{{ customer.name }}"呢？
那就需要这样定义：
angular.module('myApp').directive('myIsolateScopeWithName', function(){
return {
scope:{
name: '@myname'
},
template: 'Name:{{name}}',
controller: 'MyController'
};
});
● 使用=，外部scope赋值会影响封闭scope中的变量
angular.module('myApp').directive('myIsolateScopeWithEqual', function(){
return {
scope:{
customer: '='
},
template: '<ul><li ng-repeate="prop in customer">{{prop}}</li></ul>'
};
});
注意，这里的customer是作为变量在使用，而不是{{customer}},一旦外部的赋值发生变化会影响独立scope中的customer变量值。同样，一旦独立scope中的customer值发生变化，也会影响外部的scope的customer属性值。
外部这样使用：
<div my-isolated-scope-with-equal customer="customer"></div>
● 使用&，允许外部scope传递一个函数给封闭scope
angular.module('myApp').directive('myIsolateScopeWithFunction', function(){
return {
scope: {
datasource: '=',
action:'&'
},
template: '<ul><li ng-repeat="prop in datasource">{{ prop }}</li></ul> ' + '<button ng-click="action()">Change Data</button>'
};
});
这样使用这个directive
<div my-isolated-scope-with-function datasource="customer" action="changeData()"> </div>
changeData方法被定义在了controller里面：
$scope.changeData = function () { counter++; $scope.customer = { name: 'James', street: counter + ' Cedar Point St.' }; };
如何让外部scope传递一个带参函数给封闭scope呢？
angular.module('directivesModule').directive('isolatedScopeWithController', function () {
return {
restrict: 'EA',
scope: {
datasource: '=',
add: '&',
},
controller: function ($scope) {
...
$scope.addCustomer = function () {
//Call external scope's function
var name = 'New Customer Added by Directive';
$scope.add({ name: name });
//Add new customer to directive scope
$scope.customers.push({
name: name,
street: counter + ' Main St.'
});
};
},
template: '<button ng-click="addCustomer()">Change Data</button>' +
'<ul><li ng-repeat="cust in customers">{{ cust.name }}</li></ul>'
};
});
在页面中这样调用：
<div isolated-scope-with-controller datasource="customers" add="addCustomer(name)"></div>
■ 允许自定义的direcitve被嵌套
只要把tranclude设置成true就可以。
"use strict"; angular.module("psFramework").directive("psFramework",function(){ return { transclude: true, scope:{ title: '@', subtitle:'@', iconFile:'@' }, controller: "psFrameworkController", templateUrl: "ext-modules/psFramework/psFrameworkTemplate.html" }; })
然后在页面中就可以这样使用：
<ps-framework title="", subtile="", icon-file="">
<ps-menu>
...
</ps-menu>
</ps-framework>
参考：https://weblogs.asp.net/dwahlin/
