网络编程 
首页 > 网络编程 > 浏览文章

Angular之指令Directive用法详解

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

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

Angular之指令Directive用法详解

一、指令directive概述

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

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

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

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

<!DOCTYPE html>
<html ng-app="myModule">
 <head>
  <meta charset="UTF-8">
  <title>Angular指令--自定义标签</title>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


指令Directive.js





<script type="text/javascript">

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

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

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

   * E--element元素 <hello></hello>

   * A--attribute 属性 <div hello></div>

   * C-class 样式类 <div class="hello"></div>

   * M 注释 <!-- directive:hello -->

   */

  //指令--对元素绑定事件监听或者改变DOM

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

   return {

    restrict: 'EACM',

    templateUrl:'hello_Angular.html',

    /*template : '<p>Hello Angular</p>',*/

    replace: true

   }
  })
</script> 









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

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

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

"hello"></div>

"" src="/UploadFiles/2021-04-02/201703010900416.png">


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


Angular之指令Directive用法详解


三、指令之嵌套变换transclude





<!DOCTYPE html>

<html ng-app="myApp">

 <head>

  <meta charset="UTF-8">

  <title>transclude 嵌套变换</title>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


四、指令directive运行原理


Angular之指令Directive用法详解 


五、指令配置参数说明





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

  var directiveDefinitionObject = {

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

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

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

   templateUrl: string,//从指定的url地址加载模板或<script type="text/ng-template" id="string"></script>

   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 如下





<!DOCTYPE html>

<html ng-app="myApp">

 <head>

  <meta charset="UTF-8">

  <title>Directive指令与Controller控制器交互</title>

  <!--引入js库anglarjs-->

  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


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: '<div ng-transclude></div>',

  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





<!DOCTYPE html>

<html ng-app="myModule">

 <head>

  <meta charset="UTF-8">

  <title>directive指令与directive指令之间的交互</title>

  <!--引入第三方样式库bootstrap.min.css-->

  <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />

  <!--引入js库anglarjs-->

  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


Directive&Directive.js





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

//指令与指令之间交互

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

 return {

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

  restrict: 'AE',

  template: '<button class="btn btn-primary" ng-transclude></button>',

  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作用域绑定策略


Angular之指令Directive用法详解 


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





<!DOCTYPE html>

<html ng-app="myModule">

 <head>

  <meta charset="UTF-8">

  <title>scope绑值策略一.'@'把当前属性作为字符串传值</title>

  <!--引入js库anglarjs-->

  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


Scope@.js





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

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

 console.log($scope);

 $scope.ctrFlavor = "百事可乐";

}]);

 

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

 return {

  restrict: 'AE',

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

   flavor: '@'

  }, 

  replace:true,

  template: '<p>{{flavor}}</p>'

  //使用link进行指令和控制器两个作用域中数据的绑定。

  //如果用scope中@的话，就不需要link这么麻烦了，angularJS会自动进行绑定

  /*,

  link:function(scope,element,attrs){ 

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

   })

   scope.flavor = attrs.flavor;

  }*/

 }

}) 







scope “=” 与父scope属性进行双向绑定


index.html





<!DOCTYPE html>

<html ng-app="myModule">

 <head>

  <meta charset="UTF-8">

  <title>scope绑值策略二.'='与父scope中的属性进行双向绑定</title>

  <!--引入第三方样式库bootstrap.min.css-->

  <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />

  <!--引入js库anglarjs-->

  <script type="text/javascript" src="/UploadFiles/2021-04-02/scope=.js">


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: '<input type="text" class="form-control" ng-model="flavor" />'

  /*replace:true*/

 }

}); 







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


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


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


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


index.html







<!DOCTYPE html>

<html ng-app="myModule">

 <head>

  <meta charset="UTF-8">

  <title>scope绑值策略三.'&'传递一个来自父scope的函数，稍后调用</title>

  <!--引入第三方样式库bootstrap.min.css-->

  <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />

  <!--引入js库anglarjs-->

  <script type="text/javascript" src="/UploadFiles/2021-04-02/scope&.js">


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'

 }

}); 







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


            

            上一篇：浅谈regExp的test方法取得的值变化的原因及处理方法

            下一篇：js for循环倒序输出数组元素的实例

        

    

    
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。

    
    

        友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap