如何在Angular中使用Directive指令-重庆大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

如何在Angular中使用Directive指令

本篇文章给大家分享的是有关如何在Angular中使用Directive指令，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联公司-专业网站定制、快速模板网站建设、高性价比齐齐哈尔网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式齐齐哈尔网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖齐齐哈尔地区。费用合理售后完善，10余年实体公司更值得信赖。

一、指令directive概述

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

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

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

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



 
  
  Angular指令--自定义标签

Hello Angular

指令Directive.js



  //调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应

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

  /* restrict 属性值说明 <推荐使用EA>

   * E--element元素 

   * A--attribute 属性

* C-class 样式类

* M 注释 */ //指令--对元素绑定事件监听或者改变DOM myModule.directive('hello', function(){ return { restrict: 'EACM', templateUrl:'hello_Angular.html', /*template : '

Hello Angular

',*/ replace: true } })

==========================================================
restrict---匹配模式说明，英文意思是"限制；约束；限定",这里指的是匹配我自定义的标签
==========================================================
•E　　元素(element) 　　
•A　　属性(attribute)　　

•C　　样式类(class)　　

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

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

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

如何在Angular中使用Directive指令

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

如何在Angular中使用Directive指令

三、指令之嵌套变换transclude





 

  

  transclude 嵌套变换

  

 

 

  这里是内容哦.....

  这里是内容哦hello....

var myApp = angular.module('myApp', []); myApp.directive('hello',function(){ return { restrict: 'EA', template: '

Hello World!!!

', transclude: true, /*嵌套变换*/ replace: true /*替换*/ } })

四、指令directive运行原理

如何在Angular中使用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 如下





 

  

  Directive指令与Controller控制器交互

  

  

  

 

 

  

   数据加载......

数据加载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





 

  

  directive指令与directive指令之间的交互

  

  

  

  

  

 

 

  

   

    动感超人---力量

新闻中心

其他资讯