理解AngularJs指令


Posted in Javascript onDecember 10, 2015

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。

首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法:

angular.module('myApp', []) 
.directive('myDirective', function() { 
  return { 
    restrict: String, 
    priority: Number, 
    terminal: Boolean, 
    template: String or Template Function: 
  function(tElement, tAttrs) {...}, 
  templateUrl: String, 
  replace: Boolean or String, 
  scope: Boolean or Object, 
  transclude: Boolean, 
  controller: String or 
  function(scope, element, attrs, transclude, otherInjectables) { ... }, 
  controllerAs: String, 
  require: String, 
  link: function(scope, iElement, iAttrs) { ... }, 
  compile: // 返回一个对象或连接函数,如下所示:
  function(tElement, tAttrs, transclude) { 
    return { 
      pre: function(scope, iElement, iAttrs, controller) { ... }, 
      post: function(scope, iElement, iAttrs, controller) { ... } 
      } 
    return function postLink(...) { ... } 
    } 
  }; 
 });

1、restrict[string]

restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A,即以属性的形式来进行声明。
可选值如下:
E(元素)

<my-directive></my-directive>
A(属性,默认值)

<div my-directive="expression"></div>
C(类名)

<div class="my-directive:expression;"></div>
M(注释)

<--directive:my-directive expression-->
一般考虑到浏览器的兼容性,强烈建议使用默认的属性就可以即即以属性的形式来进行声明。最后一种方式建议再不要求逼格指数的时候千万不要用。

Code:

angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'E', 
        template: '<a href="http://www.baidu.com">百度</a>' 
      };
    })
HtmlCode:
 <my-directive></my-directive>

 效果:理解AngularJs指令

2、priority[int]

大多数指令会忽略这个参数,使用默认值0,但也有些场景设置高优先级是非常重要甚至是必须的。例如,ngRepeat将这个参数设置为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用。

3、terminal[bool]

这个参数用来停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
例如:ngIf的优先级略高于ngView(它们操控的实际就是terminal参数),如果ngIf的表达式值为true,ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先级较低就不会被执行。

4、template[string or function]

template参数是可选的,必须被设置为以下两种形式之一:

  • 一段HTML文本;
  • 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串。tElement和tAttrs中的t代表template,是相对于instance的。

首先演示下第二种用法:

angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'EAC', 
        template: function (elem, attr) {
          return "<a href='" + attr.value + "'>" + attr.text + "</a>";
        }
    };
  })

HtmlCode:(效果同上,不做演示了)

<my-directive value="http://www.baidu.com" text="百度"></my-directive>
    <div my-directive
       value="http://www.baidu.com"
       text="百度"></div>

5、templateUrl[string or function]

templateUrl是可选的参数,可以是以下类型:

  • 一个代表外部HTML文件路径的字符串;
  • 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件路径的字符串。

无论哪种方式,模板的URL都将通过ng内置的安全层,特别是$getTrustedResourceUrl,这样可以保护模板不会被不信任的源加载。 默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件。加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟,可以在部署应用之前对HTML模板进行缓存。

Code:

angular.module('app',[])
  .directive('myDirective', function () {
      return { 
        restrict: 'AEC', 
        templateUrl: function (elem, attr) {
          return attr.value + ".html"; //当然这里我们可以直接指定路径,同时在模板中可以包含表达式
        }
    };
  })

6、replace[bool]

replace是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
例如上面的示例默认值情况下,生成的html代码如下:

<my-directive value="http://www.baidu.com" text="百度"><a href="http://www.baidu.com">百度</a></my-directive>

如果设置replace=true

<a href="http://www.baidu.com" value="http://www.baidu.com" text="百度">百度</a>

据我观察,这种效果只有设置restrict="E"的情况下,才会表现出实际效果。

介绍完基本的指令参数后,就要涉及到更重要的作用域参数了...

7、scope参数[bool or object]

 scope参数是可选的,可以被设置为true或一个对象。默认值是false。

如果一个元素上有多个指令使用了隔离作用域,其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此,对于这些对象来说scope默认被设置为true。内置指令ng-controller的作用,就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。这里的继承就不在赘述,和面向对象中的继承基本是一直的。

 首先我们来分析一段代码:

<div ng-app="app" ng-init="name= '祖父'">
      <div ng-init="name='父亲'">
        第一代:{{ name }}
        <div ng-init="name= '儿子'" ng-controller="SomeController">
          第二代: {{ name }}
          <div ng-init="name='孙子'">
            第三代: {{ name }}
          </div>
        </div>
      </div>
    </div>

我们发现第一代,我们初始化name为父亲,但是第二代和第三代其实是一个作用域,那么他们的name其实是一个对象,因此出现的效果如下:

第一代:父亲
第二代: 孙子
第三代: 孙子
我们在修改一下代码,把第三代隔离开来再看看效果:

 

<div ng-app="app"ng-init="name= '祖父'">
      <div ng-init="name='父亲'">
        第一代:{{ name }}
        <div ng-init="name= '儿子'" ng-controller="SomeController">
          第二代: {{ name }}
          <div ng-init="name='孙子'" ng-controller="SecondController">
            第三代: {{ name }}
          </div>
        </div>
      </div>
    </div>

JsCode:

angular.module('app', [])
    .controller('SomeController',function($scope) {
      
    })
    .controller('SecondController', function ($scope) {
    
  })

效果如下:

第一代:父亲
第二代: 儿子
第三代: 孙子
在修改下代码来看看继承:

<div ng-app="app"ng-init="name= '祖父的吻'">
      <div>
        第一代:{{ name }}
        <div ng-controller="SomeController">
          第二代: {{ name }}
          <div ng-controller="SecondController">
            第三代: {{ name }}
          </div>
        </div>
      </div>
    </div>

效果如下:

第一代:祖父的吻
第二代: 祖父的吻
第三代: 祖父的吻

如果要创建一个能够从外部原型继承作用域的指令,将scope属性设置为true,简单来说就是可继承的隔离,即不能反向影响父作用域。

 再来看个例子:

angular.module('myApp', [])
    .controller('MainController', function ($scope) {
    })
    .directive('myDirective', function () {
      return {
        restrict: 'A',
        scope:false,//切换为{},true测试
        priority: 100,
        template: '<div>内部:{{ myProperty }}<input ng-model="myProperty"/></div>'
      };
    });

Html代码:

<div ng-controller='MainController' ng-init="myProperty='Hello World!'">
    外部: {{ myProperty}}
    <input ng-model="myProperty" />
    <div my-directive></div>
  </div>

当我们改变scope的值我们会发现

false:继承但不隔离

理解AngularJs指令

true:继承并隔离

理解AngularJs指令

{}:隔离且不继承

理解AngularJs指令

 8、transclude

transclude是一个可选的参数。默认值是false。嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏。我们可以将整个模板,包括其中的指令通过嵌入全部传入一个指令中。指令的内部可以访问外部指令的作用域,并且模板也可以访问外部的作用域对象。为了将作用域传递进去,scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数,那么指令内部的作用域将被设置为传入模板的作用域。

只有当你希望创建一个可以包含任意内容的指令时,才使用transclude: true。

 我们来看两个例子-导航栏:

<div side-box title="TagCloud">
    <div class="tagcloud">
      <a href="">Graphics</a>
      <a href="">ng</a>
      <a href="">D3</a>
      <a href="">Front-end</a>
      <a href="">Startup</a>
    </div>
  </div>

JsCode:

angular.module('myApp', []) 
 .directive('sideBox', function() { 
   return { 
     restrict: 'EA', 
     scope: { 
       title: '@' 
     }, 
     transclude: true, 
     template: '<div class="sidebox"><div class="content"><h2 class="header">' +
       '{{ title }}</h2><span class="content" ng-transclude></span></div></div>' 
     }; 
  });

这段代码告诉ng编译器,将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方。

再来你看个官网的例子:

angular.module('docsIsoFnBindExample', [])
 .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.name = 'Tobias';
  $scope.hideDialog = function () {
   $scope.dialogIsHidden = true;
   $timeout(function () {
    $scope.dialogIsHidden = false;
   }, 2000);
  };
 }])
 .directive('myDialog', function() {
  return {
   restrict: 'E',
   transclude: true,
   scope: {
    'close': '&onClose'
   },
   templateUrl: 'my-dialog-close.html'
  };
 });

my-dialog-close.html

<div class="alert">
 <a href class="close" ng-click="close()">×</a>
 <div ng-transclude></div>
</div>

index.html

<div ng-controller="Controller">
 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Check out the contents, {{name}}!
 </my-dialog>
</div>

如果指令使用了transclude参数,那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。

 9、controller[string or function]

 controller参数可以是一个字符串或一个函数。当设置为字符串时,会以字符串的值为名字,来查找注册在应用中的控制器的构造函数.

angular.module('myApp', []) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 'SomeController' 
})

可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器

angular.module('myApp',[]) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里
} 
});

我们可以将任意可以被注入的ng服务注入到控制器中,便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有:

1. $scope

与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。

<div id="aDiv"class="box"></div>
具有如下的属性对象:
{ 
id: "aDiv", 
class: "box" 
}

4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。

angular.module('myApp',[])
 .directive('myLink', function () {
   return {
     restrict: 'EA',
     transclude: true,
     controller:
     function ($scope, $element,$attrs,$transclude) {
       $transclude(function (clone) {       
         var a = angular.element('<a>');
         a.attr('href', $attrs.value);
         a.text(clone.text());
         $element.append(a);
       });
     }
   };
 });

html 

<my-link value="http://www.baidu.com">百度</my-link>
<div my-link value="http://www.google.com">谷歌</div>

仅在compile参数中使用transcludeFn是推荐的做法。link函数可以将指令互相隔离开来,而controller则定义可复用的行为。如果我们希望将当前指令的API暴露给其他指令使用,可以使用controller参数,否则可以使用link来构造当前指令元素的功能性(即内部功能)。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互,使用链接会是更好的选择。使用了嵌入,控制器中的作用域所反映的作用域可能与我们所期望的不一样,这种情况下,$scope对象无法保证可以被正常更新。当想要同当前屏幕上的作用域交互时,可以使用传入到link函数中的scope参数。

10、controllerAs[string]

controllerAs参数用来设置控制器的别名,这样就可以在视图中引用控制器甚至无需注入$scope。

<div ng-controller="MainController as main">
    <input type="text" ng-model="main.name" />
    <span>{{ main.name }}</span>
  </div>

JsCode:

angular.module('myApp',[])
  .controller('MainController', function () {
    this.name = "Halower";
  });

控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器,并且这个对象是隔离的、易于测试。

11、 require[string or string[]]

 require为字符串代表另外一个指令的名字。require会将控制器注入到其所指定的指令中,并作为当前指令的链接函数的第四个参数。字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。在任何情况下,ng编译器在查找子控制器时都会参考当前指令的模板。

如果不使用^前缀,指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=""
如果使用?前缀,在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
 如果添加了?^ 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找
如果没有任何前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误
12、compile【object or function】

compile选项本身并不会被频繁使用,但是link函数则会被经常使用。本质上,当我们设置了link选项,实际上是创建了一个postLink() 链接函数,以便compile() 函数可以定义链接函数。通常情况下,如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。

编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。 在作用域同DOM链接之前可以手动操作DOM。在实践中,编写自定义指令时这种操作是非常罕见的,但有几个内置指令提供了这样的功能。

13、link

compile: function(tEle, tAttrs, transcludeFn) {
 //todo:
 return function(scope, ele, attrs) {
 // 链接函数
 };

链接函数是可选的。如果定义了编译函数,它会返回链接函数,因此当两个函数都定义时,编译函数会重载链接函数。如果我们的指令很简单,并且不需要额外的设置,可以从工厂函数(回调函数)返回一个函数来代替对象。如果这样做了,这个函数就是链接函数。

14、ngModel

它提供更底层的API来处理控制器内的数据,这个API用来处理数据绑定、验证、 CSS更新等不实际操作DOM的事情,ngModel 控制器会随 ngModel 被一直注入到指令中,其中包含了一些方法。为了访问ngModelController必须使用require设置.

ngModelController常用的元素如下:

 1).为了设置作用域中的视图值,需要调用 ngModel.$setViewValue() 函数。
$setViewValue() 方法适合于在自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望在回调时设置$viewValue并执行digest循环。

angular.module('myApp')
    .directive('myDirective', function() {
      return {
        require: '?ngModel',
        link: function(scope, ele, attrs, ngModel) {
          if (!ngModel) return;
          $(function() {
            ele.datepicker({
               //回调函数
              onSelect: function(date) {
                // 设置视图和调用 apply
                scope.$apply(function() {
                  ngModel.$setViewValue(date);
                });
              }
            });
          });
        }
      };
    });

2).$render方法可以定义视图具体的渲染方式
3).属性(这里属性可以参考前一篇文章末尾进行学习)

以上就是关于AngularJs指令的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
JS变量及其作用域
Mar 29 Javascript
layui弹出层效果实现代码
May 19 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
详解AngularJS实现表单验证
Dec 10 #Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 #Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 #Javascript
jquery实现定时自动轮播特效
Dec 10 #Javascript
jQuery手动点击实现图片轮播特效
Apr 20 #Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
YII实现分页的方法
2014/07/09 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python有参函数使用代码实例
2020/01/06 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python如何在bool函数中取值
2020/09/21 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
公司门卫的岗位职责
2014/02/19 职场文书
股份合作协议书
2014/04/12 职场文书
高温慰问简报
2015/07/21 职场文书
培训后的感想
2015/08/07 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers