先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="name"></dir> <script src="js/angular.js"></script> <script> var app = angular.module("app", []); app.contr…
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transclude了b,b的$$prevSibling是a,而a的$$prevSibling不是b <div a> <div ng-transclude=""> <div b></div> </div> </div> angul…
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与scope有关,可以看做是<AngularJS入门心得1——directive和controller如何通信>在scope上的补充和延伸. 小时候,老师就教会了我们盲人摸象这个成语,教导我们认识事物不能片面,缺少对于一个事物全局的认知.所以,说到指令,它的一个完整结构如下: angular.mod…
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个name · 建立一个factory,让需要通讯的指令依赖注入factory服务 以上都可以解决通讯问题,但是在不同的状况下还是会遇到代码阅读上的问题 今天遇到的问题是当指令A的child的指令B要和指令A通讯,同时指令C(不在指令A的child)要和指令A通讯 最终决定使用$on和$boardcast…
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div book-list…
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也…
本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介绍了很多angular自带的指令,下面我们看看如何使用directive自定义指令. 先看一个例子: <body> <div my-hello></div> </body> <script type="text/javascript"&…
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,ng-bind-template,ng-change,ng-submit,ng-cloak,ng-bind 详细介绍: $rootScope 是作用域链的起始点,任何嵌套在ng-app内的指令都会继承$rootScope ng-app 任何具有ng-app属性的dom元素都将被标记为$rootScop…
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ng-showAndng-hide</title><script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script></head>…
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // priority: 1, // terminal: true, // scope: {}, // {} = isolate, true = child, false/undefined = no change // controller: function($scope, $element, $attrs…