Angular之指令Directive用法详解

Angular之指令Directive用法详解

项目筹备近期开启Angular学习，指令比较难理解所以记录备案，推荐视频大漠穷秋 AngulaTSmRhXr实战 由于篇幅过长,列举大纲如下：

一、指令directive概述

指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jquery一样效果具有交互性。不同于jQuery，Anguhttp://lar设计核心思想是通过数据与模板的绑定，摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。

几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(标签) ng-repeat迭代器指令可以重复标记元素、ng-show指令可以根据条件是否显示一个元素、ng-model指令具有双向数据绑定特性、ng-controller 用来声明一个需要和数据进行绑定的模板区域

二、自定义指令directive之模式匹配restrict

直接上代码体验一把，index.html

指令Directive.js

==========================================================

restrict---匹配模式说明， 英文意思是"限制；约束；限定",这里指的是匹配我自定义的标签

==========================================================

•E　　元素(element) 　　

•A　　属性(attribute)　　

•C　　样式类(class)　　  

•M　　注释                              注意！！！空格(不常用)

温馨tips: 推荐使用EC或EA匹配模式

replace 是否替换元素的模式 replace:true浏览器DOM结构如下

replace:false 或没有replace属性时浏览器DOM结构如下

三、指令之嵌套变换transclude

这里是内容哦.....

四、指令directive运行原理

五、指令配置参数说明

myModule.directive('namespaceDirectiveName', function factory(injectables) {

var directiveDefinitionObject = {

restrict: string,//指令的使用方式，包括标签，属性，类，注释

priority: number,//指令执行的优先级

template: string,//指令使用的模板，用HTML字符串的形式表示

templateUrl: string,//从指定的url地址加载模板或

replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上

transclude: bool,//是否将当前元素的内容转移到模板中

scope: bool or object,//指定指令的作用域

controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数

require: string,//指定需要依赖的其他指令

link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等

compile: function compile(tElement, tAttrs, transclude){

return: {

pre: function preLink(scope, iElement, iAttrs, controller){...},

post: function postLink(scope, iElement, iAttrs, controller){...}

}

}//编程的方式修改DOM模板的副本，可以返回链接函数

};

return directiveDefinitionObject;

});

六、指令与控制器的交互

index.html 如下

数据加载......

数据加载2......

Directive&Controller.js

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

myApp.controller('myAppCtrl', ['$scope', function($scope){

console.log($scope);

$scope.loadData = function(){

console.log('数据加载中.....');

}

}]);

myApp.controller('myAppCtrl2', ['$scope', function($scope){

console.log($scope);

$scope.loadData2 = function(){

console.log('数据加载中2.....');

}

}]);

//指令与控制器之间交互

myApp.directive('loader', function(){

return {

restrict: 'EA',

template: '

transclude: true,

replace: true,

/*scope: {}, 独立scope*/

link: function(scope, element, attrs){

element.bind('mouseenter', function(){

/*这里调用controller中的方法三种方式*/

/*(1) scope.loadData();

(2) scope.$apply('loadData()');

(3) attrs.howtoload === 属性上绑定的函数名称*/

//属性方式 注意坑！！！ howtoload 得小写

scope.$apply(attrs.howtoload);

})

}

}

})

实现的效果是当鼠标滑过div元素时，调用一个加载数据的方法。

上述例子中定义了两个控制器，然后两个控制器中都使用了loader指令，并且，每个指令中都有一个参数 howToLoad .

关于指令中的 link ，上面介绍运行机制中可以了解到，link: function postLink(scope, element, attrs) {...}是用来操作dom和绑定监听事件的。

link中会有三个参数：scope（指令所属的控制器中的 $scope 对象）、element（指令所属dom元素）、attrs（dom元素所传的参数

如howToLoad 参数给的值 loadData()

然后对于如何调用所需函数，有两种方法：

1> scope.loadData() 两个控制器方法不一致时，就不能用了

2> scope.$apply() $apply()方法会从所有控制器中找到多对应的方法。这就实现了指令的复用。

明确对于控制器ng-controller都会创建属于自己独立的scope;对于指令若无scope:{}声明会继承控制器中的scope

七、指令与指令的交互

index.html

动感超人---力量

动感超人2---力量+敏捷

动感超人3---力量+敏捷+发光

Directive&Directive.js

var myModule = angular.module('myModule',[]);

//指令与指令之间交互

myModule.directive('superman', function(){

return {

scope: {},/*独立作用域*/

restrict: 'AE',

template: '',

transclude: true,

controller: function($scope){ /*暴露controller里面方法*/

$scope.abilities = [];

this.addStrength = function(){

$scope.abilities.push('strength');

};

this.addSpeed = function(){

$scope.abilities.push('speed');

};

this.addLight = function(){

$scope.abilities.push('light');

};

},

link: function(scope, element, attrs, supermanCtr){

element.addClass = "btn btn-primary";

element.bind('mouseenter', function(){

console.log(scope.abilities);

})

}

}

})

myModule.directive('strength', function(){

return {

require: "^superman",/*require参数指明需要依赖的指令*/

link: function(scope, element, attrs, supermanCtr){

supermanCtr.addStrength();

}

}

});

myModule.directive('speed', function(){

return {

require: "^superman",

link: function(scope, element, attrs, supermanCtr){

supermanCtr.addSpeed();

}

}

});

myModule.directive('light', function(){

return {

require: "^superman",

link: function(scope, element, attrs, supermanCtr){

supermanCtr.addLight();

}

}

});

*require参数指明需要依赖的指令

*指令中的controller相当于暴露里面方法，便于指令复用

八、scope作用域绑定策略

scope “@” 把当前属性作为字符串传值

{{describe}}

Ctrl--控制器:

{{ctrFlavor}}

Directive--指令:

{{flavor}}

scope=.js

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl',['$scope', function($scope){

$scope.describe = "scope绑值策略二.=与父scope中的属性进行双向绑定";

$scope.ctrFlavor = "可口可乐";

}]);

//=与父scope中的属性进行双向绑定

myModule.directive('drink',function(){

return {

restrict: 'EA',

scope: { /*ng-isolate-scope 隔离作用域*/

flavor : '='

},

template: ''

/*replace:true*/

}

});

这个例子中有两个输入框，第一个绑定了myModuleCtrl控制器中的scope对象的ctrlFlavor 属性。

第二个绑定的是指令中的flavor属性。但是在drink 指令中 scope对象的flavor 属性 用了 ”=“ ，

与父scope中的属性进行双向数据绑定。所以两个值有一个改动，另一个属性值也会改动。 简单理解为把两个存放数据仓库给相等 A1 == B1

scope&  '&'传递一个来自父scope的函数，稍后调用

index.html

scope&.js

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl',['$scope', function($scope){

$scope.sayHello = function(name){

console.log('Hello'+name);

}

}]);

myModule.directive('greeting', function(){

return {

restrict: 'EA',

scope: { /*'&'传递一个来自父scope的函数，稍后调用*/

greet : '&'

},

templateUrl: 'sayHello.html'

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。