AngularJS之directive
AngularJS之directive
AngularJS是什么就不多舌了,这里简单介绍下directive。内容基本上是读书笔记,所以如果你看过《AngularJS up and running》,那么这个可以忽略。
angular.module('stockMarketApp', []) .directive('stockWidget', [function() {
return {
3 // Directive definition will go here
}; }]);
angular.module('stockMarketApp') .directive('stockWidget', [function() {
return {
3 templateUrl: 'stock.html'
};
}]);
The restrict keyword defines how someone using the directive in their code might use it. As mentioned previously, the default way of using directives is via attributes of existing elements (we used <div stock-widget> for ours).
When we create our directive, we have control in deciding how it’s used. The possible values for restrict (and thus the ways in which we can use our directive) are:
A
The letter A in the value for restrict specifies that the directive can be used as an attribute on existing HTML elements (such as <div stock-widget></div>). This is the default value.
E
The letter E in the value for restrict specifies that the directive can be used as a new HTML element (such as <stock-widget></stock-widget>).
C
The letter C in the value for restrict specifies that the directive can be used as a class name in existing HTML elements (such as <div class="stock-widget"> </div>).
M
The letter M in the value for restrict specifies that the directive can be used as HTML comments (such as <!-- directive: stock-widget -→). This was previ‐ ously necessary for directives that needed to encompass multiple elements, like multiple rows in tables, etc. The ng-repeat-start and ng-repeat-end directives were introduced for this sole purpose, so it’s preferable to use them instead of com‐ ment directives.
link: function($scope, $element, $attrs) {}
angular.module('stockMarketApp') .directive('stockWidget', [function() {
return {
templateUrl: 'stock.html',
restrict: 'AE',
link: function($scope, $element, $attrs) {
$scope.getChange = function(stock) {
return Math.ceil(((stock.price - stock.previous) /
stock.previous) * 100);
};
} };
}]);
By default, each directive inherits its parent’s scope, which is passed to it in the link function. This can lead to the following problems:
• Adding variables/functions to the scope modifies the parent as well, which suddenly gets access to more variables and functions.
• The directive might unintentionally override an existing function or variable with the same name.
• The directive can implicitly start using variables and functions from the parent. This might cause issues if we start renaming properties in the parent and forget to do it in the directive.
false
This is the default value, which basically tells AngularJS that the directive scope is the same as the parent scope, whichever one it is. So the directive gets access to all the variables and functions that are defined on the parent scope, and any modifi‐ cations it makes are immediately reflected in the parent as well.
true
This tells AngularJS that the directive scope inherits the parent scope, but creates a child scope of its own. The directive thus gets access to all the variables and func‐ tions from the parent scope, but any modifications it makes are not available in the parent. This is recommended if we need access to the parent’s functions and infor‐ mation, but need to make local modifications that are specific to the directive.
object
We can also pass an object with keys and values to the scope. This tells AngularJS to create what we call an isolated scope. This scope does not inherit anything from the parent, and any data that the parent scope needs to share with this directive needs to be passed in through HTML attributes. This is the best option when cre‐ ating reusable components that should be independent of how and where they are used.
AngularJS之directive的更多相关文章
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- 前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...
- Angularjs的directive封装ztree
一般我们做web开发都会用到树,恰好ztree为我们提供了多种风格的树插件. 接下来就看看怎么用Angularjs的directive封装ztree <!DOCTYPE html> < ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS之Directive,scope,$parse
AngularJS内幕详解之 Directive AngularJS内幕详解之 Scope AngularJS的指令(Directive) compile和link的区别及使用示例 浅谈Angular ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
随机推荐
- linux下包不重新编译php安装openssl 扩展
今天在刚装好的centos上安装composer,老是报错,提示不安全的,后来发现是由于https的缘故,需要openssl,可能是开始装php的时候没有安装此扩展,网上有好多方案,一开始我认为只有重 ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- iOS多线程学习及总结
能有份网上的存储资料,备以后提升及参考 iOS 多线程编程 简介 一. iOS有三种多线程编程的技术,分别是: 1. NSThread 2. Cocoa NSOp ...
- Ubuntu 手工挂载硬盘
首先我们得到到/dev/sda3这个分区的UUID,使用以下命令: sudo blkid /dev/sda3 结果如下: 然后,我们按照/etc/fstab文件中的格式添加一行如下内容: UUID=9 ...
- Unity自动场景保存脚本
新建一个名为AutoSave的编辑器脚本,并放于Assets/Editor下. using System; using UnityEditor; using UnityEditor.SceneMana ...
- 14——小心copying行为
资源的copying行为决定对象的copying行为. 抑制copying行为,使用引用计数.
- 用python+selenium抓取豆瓣读书中最受关注图书并按评分排序
抓取豆瓣读书中的(http://book.douban.com/)最受关注图书,按照评分排序,并保存至txt文件中,需要抓取书籍的名称,作者,评分,体裁和一句话评 方法一: #coding=utf-8 ...
- Lua小技巧
来公司以后,业务逻辑都用lua写.写了好长时间了,到最近才觉得有点掌握了Lua的灵活.最近用Lua写了个类似集合一样的东西,如果两次向集合里放入同一个元素,就会报错,方便检查配置.代码如下: -- k ...
- redis-cluster 迁移过程错误记录
因为集群内的 单点redis消耗 内存达到了14个G,所以需要增加新的节点,并将数据迁移过去,使用 redis-trib reshard ip:port A : 2105slot 14.5 ...
- 更新系统没有mac dashboard 问题解决
今天更新了mac的系统到EL Capitan,结果出来以后发现平时经常使用的mac dashboard没了,就是这玩意: 找了半天方法,终于知道了这个叫“dashboard” (md之前完全不知道,无 ...