【AngularJs自定义指令详解（3） - scope】的更多相关文章

AngularJs自定义指令详解（1） - restrict

下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布2.0,所以现在也没必要追求最新版本.而且,2.0变动实在太大,所以当前学习AngularJs不需要过度深入. AngularJs自定义指令时,要求返回一个指令定义对象(Directive Definition Object),该对象可以声明若干属性和方法.下面例子的restrict.templat…

AngularJs自定义指令详解（6） - controller、require

在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要封装一些行为,给其他指令使用.下面是一个简单的例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="…

AngularJs自定义指令详解（2） - template

一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAttrs. 前者用的较为普遍,而且也好理解.后者暂不理会. 下面是一个例子,在模板中使用rootScope里定义的变量: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8…

AngularJs自定义指令详解（3） - scope

我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-directive要展示的是Hello AngularJs. 为了实现上面的想法,一个做法是创建两个控制器(因为控制器会创建子作用域,与外界隔离开),分别定义‘World’和‘AngularJs’输出: <!DOCTYPE html> <html> <head lang="en…

AngularJs自定义指令详解（5） - link

在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器. // require 'SomeController',link: function(scope, element, attrs, SomeController) { // 在这里操作DOM,可以访问r…

AngularJs自定义指令详解（9） - terminal

例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js"></script> <script src=""></script> <title>&…

AngularJs自定义指令详解（8） - priority

priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js"></script&…

AngularJs自定义指令详解（7） - multiElement

multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js"></script> <script src=""&g…

AngularJs自定义指令详解（10） - 执行次序

代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js"></script> <script src=""></script> <title>&…

AngularJs自定义指令详解（4） - transclude

transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js">…