angularjs的ng-repeat指令下的scope作用域

ng-repeat指令在迭代的时候,每次迭代都会创建一个新的scope,比如下面的代码:

<div ng-repeat="list in lists" ng-controller="listController">
        <some-directive/>
</div>
app.controller(‘listController‘,function($scope){
   $scope.lists = [1,2,3,4,5]
})

div所在的scope就是listController控制器定义的$scope,而some-directive指令并没有控制器,虽然它没有控制器,但是它却是有自己的scope的,且scope下有一个属性list.还有一个属性$index,等等.

所以,ng-repeat指令创建了很多个同样的迭代,每个迭代都有自己的scope,每个scope下都有自己的list属性和$index属性等.这样,如果是在写ng-repeat指令下面的指令的时候(比如这里的some-directive),需要知道它是有自己的scope的.

这在我之前自己写的模拟ng-repeat指令的时候,代码里就可以看出:

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

时间: 2024-11-05 04:50:45

angularjs的ng-repeat指令下的scope作用域的相关文章

AngularJs(五)从Controller控制器谈谈$scope作用域

大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp"> <head> <

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)【转】

学习了AngularJS好长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 当初看的是<AngularJS权威指南>这本书,但是感觉这本书关于这方面讲的不是很细致,另外吐槽一下,这本书中文版印刷的质量不是很好,很多地方都有错误:不过讲的还是可以的,是一本学习AngularJS的好书. 下面我们就来详细分析一下指令的作用域.在这之前希望你对AngularJS的Directive有一定的了解,不然你对下面部分的理解可能会有一点难度.

AngularJs指令配置参数scope详解

AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义. scope表示指令的作用域,它有三个可选值:true.false.对象{}. .directive("myDirective", function(){ return { restrict: "EA", scope: true/false/{}, template: "<div>{{cont

AngularJS开发之_指令

指令是什么?    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index.html : 1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <bo

Angular-自定义指令-下

自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定义指令(上)中,写了一个简单的<say-hello></say-hello>,能够跟美女打招呼.但是看看人家ng内置的指令,都是这么用的:ng-model="m",ng-repeat="a in array",不单单是作为属性,还可以赋值给它,与

AngularJS(五)——指令

一.自定义指令: zhiling.html <span style="font-size:18px;"><!doctype html> <html ng-app="myApp"> <head> <script src="js/angular-1.3.0.js"></script> <script src="zhiling.js"></sc

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新