文档章节

Angular中Directive总结

SnowFlake
 SnowFlake
发布于 2016/06/20 16:12
字数 653
阅读 5
收藏 0

参考:http://www.zouyesheng.com/angular.html

Directive指令

个人理解增强复用性。

操作dom最好放到指令中不要放到controller中。

定义指令的写法模板

var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    transclude: false,
    restrict: 'A',
    scope: false,
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
  return directiveDefinitionObject;
});

由上可知,定义指令,需要返回一个对象。对象中包含很多属性如restrict,replace等。下面根据例子介绍每个属性的用法。

例1

See the Pen Directive/1 Basic by finley (@mafeifan ) on CodePen.

生成的html为

<my-directive><a href="http://google.com">Click me to go to Google</a></my-directive>
<p my-directive=""><a href="http://google.com">Click me to go to Google</a></p>

参数restrict:个人理解指令的使用方式。可选值 EACM。分别代表 element,attribute,class和comment。

  • E 元素方式 <my-directive></my-directive>
  • A 属性方式 <div my-directive="exp"> </div>
  • C 类方式 <div class="my-directive: exp;"></div>
  • M 注释方式 <!-- directive: my-directive exp -->

参数template:要替换的内容。

参数templateUrl:从指定的url读模版内容,如果内容很长或者需要复用就用这个参数吧。比如我们可以写成

templateUrl : "../myTemplate.html" 
// 或者动态获取
templateUrl: function(element, attrs) {
    return attrs.templateUrl || '../../uib/template/alert/alert.html';
},

参数replace:是否使用模板内容替换掉整个节点, true 替换整个节点, false 替换节点内容。如例1,若replace为true。则生成的html结构如下:

<a href="http://google.com">Click me to go to Google</a>
<a href="http://google.com" my-directive="">Click me to go to Google</a>

参数link:

例2 link方法

See the Pen Directive/2 link by finley (@mafeifan ) on CodePen.

参数scope:绑定策略

参数link和compile。分别代表编译和链接。

例3 绑定

如下TestCtrl里div元素有4个属性。a,abc,xx,c

<body ng-app="myApp">
      <div ng-controller="TestCtrl">
        <div a abc="here" xx="{{ a }}" c="ccc"></div>
      </div>
  </body>

JS

angular.module('myApp',[])
.controller('TestCtrl', function($scope){
  $scope.a = '123';
  $scope.here = 'here ~~';
})

.directive('a', function(){
  var func = function(element, attrs, link){
    return function(scope){
      /** 输出结果
        a: "here"
        b: "123"
        c: "ccc"
        d: "ccc"
        e: "here ~~
       */
      console.log(scope);
    };
  };
  return {
    restrict: 'A',
    compile: func,

     // a 找到属性名为abc,其值为here
     // b 找到属性名为xx,其值为{{a}} 接着找$scope.a 存在,其值为 123
     // c @attrName 没有写attrName, 默认取自己的值,等价于@c ,找到属性c,其值为ccc
     // d 如上
     // e '=abc' 把属性abc的值当作scope的属性名。 这里存在属性abc,其值为here。存在$scope.here。最终值为'here ~~'
     // 若改为abc={{ here }} 效果跟 b: '@xx '一样

scope: {a: '@abc', b: '@xx', c: '@', d: '@c', e: '=abc'}
  };
});

例4 transclude 方法

See the Pen NG Directive学习4 transclude by finley (@mafeifan) on CodePen.

name

priority

terminal
controller
require
transclude

 

本文转载自:http://www.cnblogs.com/mafeifan/p/5085623.html

SnowFlake
粉丝 9
博文 171
码字总数 0
作品 0
郑州
程序员
私信 提问
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
54
0
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
305
2
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部