2015-10-06 95 views
1

我试图理解angularjs中的范围。Angularjs中的范围

在angularjs中注册一个指令时说,如果我们不提供任何范围作为对象的属性,那么对象的范围是什么呢?

例如,考虑下面的代码: -

app.directive("kid", function() { 
return { 
restrict: "E", 
template: '<input type="text" ng-model="chore"> {{chore}}' 
    }; 
}); 

现在说,如果我在我的HTML 2个元素: -

<kid></kid> 
    <kid></kid> 

那么,如何做上述落得共享相同的范围是什么?我还无法找到令人信服的答案。

回答

1

你的问题是关于范围继承和隔离范围。

如果你在指令对象上声明范围属性,那么指令有它自己的隔离范围。

如果声明对你的指令作用域属性对象指令继承了它在实例化的范围的范围。

因此,与您的孩子指令定义不声明隔离范围孩子指令在下面两个代码示例继承它们在实例化控制器的范围。

<div ng-controller="myCtrl"> 
    <kid></kid> 
    <kid></kid> 
</div> 
2

是的,因为您没有声明指令的任何scope选项,它将共享相同的范围。

这里是Demo Plunkr

现在开门见山,什么是范围对象?

scope Angular中的对象没有任何上下文信息,并且可用于html,也可用于提供双向绑定。基本上范围是绑定一些控制器。

当事情涉及到指令scope,如果你没有提到内部指令scope财产,这意味着指令股,其中向元件已放置在控制的范围。

为了使它们视为不同scope每个指令,你可以用一个孤立的范围内创建一个指令,可以使用scope: {}一个指令中进行定义,当你定义一个scope: {}一个指令,会创建一个孤立的孩子该范围不是使用$scope.$new(true)方法从原始范围继承的原型。

Plunkr孤立范围

+0

好像你了解隔离范围,有一个概念,但是你的英语余地广阔的误解。也许更仔细地说一下这一点。 – hally9k

+0

@ hally9k现在看起来不错..可以自由编辑答案.. –

+0

我确实开始编辑你的答案,但发现自己完全重写它,所以我只是添加了我自己的答案。 – hally9k

0

范围是指应用程序模型中的对象。它是表达式的执行上下文。范围按层次结构排列,模仿应用程序的DOM结构。范围可以观察表达式并传播事件。

范围特性

  1. 作用域提供的API($表),以enter image description here观察模型的突变。
  2. 作用域提供API($ apply),通过系统 将任何模型更改传播到“Angular领域” (控制器,服务,Angular事件处理程序)之外的视图中。
  3. 作用域提供对其评估表达式的上下文。

例如{{username}}表达式是没有意义的,除非它是针对定义username属性的特定范围进行评估的.Scope是应用程序控制器和视图之间的粘合剂。

http://i.stack.imgur.com/eEkVF.png