困惑Angularjs transcluded和隔离示波器和放大器;绑定 [英] Confused about Angularjs transcluded and isolate scopes & bindings

查看：147
本文介绍了困惑Angularjs transcluded和隔离示波器和放大器;绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我努力理解的模型对于哪些范围有限指令的范围及其绑定。

I am struggling to understand the scope of models and their bindings in respect of directives which have limited scope.

我得到关于限制指令的范围意味着控制器。$范围和directive.scope不再是同样的事情。然而，我感到困惑的任内的指令模板或HTML模型配售如何影响数据绑定。我觉得我失去了一些东西很基本的，并继续前进，我需要明白这一点。

I get that restricting the scope on a directive means that controller.$scope and directive.scope are no longer the same thing. However, I am confused about how the placing of models either within the directive template or in the html affects data binding. I feel I'm missing something very fundamental and to move on I need to understand this.

看看下面code（小提琴这里： http://jsfiddle.net/2ams6/ ）

Take the following code (fiddle here: http://jsfiddle.net/2ams6/)

JavaScript的

JavaScript

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template:   '<div ng-transclude>'+
                    '<h3>Template title: {{title}}</h3>' +
                    '<h3>Template data.title:{{data.title}}</h3>' +
                    '</div>'
    }    
});

HTML 

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.title">
        <testel title="{{data.title}}">
            <h3>Transclude title:{{title}}</span></h3>
            <h3>Transclude data.title:{{data.title}}</h3>
        </testel>
    </div>
</div>

该模型只更新 {{title}}的在模板中，而 {{} data.title} 在transclusion。 为什么不 {{title}}的在transclusion也不 {{} data.title} 模板？

The model only updates {{title}} within the template, and {{data.title}} in the transclusion. Why not {{title}} in the transclusion nor {{data.title}} in the template?

移动输入transclusion内像这样（小提琴这里： http://jsfiddle.net/eV8q8/1/）

Moving the input to within the transclusion like so (fiddle here: http://jsfiddle.net/eV8q8/1/):

<div ng-controller="Ctrl">
    <testel title="{{data.title}}">
        <input ng-model="data.title">
         <h3>Transclude title: <span style="color:red">{{title}}</span></h3>

         <h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3>

    </testel>
</div>

现在只意味着transclude {{数据：标题}} 得到更新。 为什么不要么模板 {{title}}的或 {{} data.title} ，也transclude {{title}}的？

now means only transclude {{data:title}} gets updated. Why not either template {{title}} or {{data.title}}, nor transclude {{title}}?

最后，在这里输入移动到模板中，像这样（小提琴： http://jsfiddle.net/4ngmf/2 / ）：

And finally, moving the input to within the template, like so (fiddle here: http://jsfiddle.net/4ngmf/2/):

template: '<div ng-transclude>' +
            '<input ng-model="data.title" />' +
            '<h3>Template title: {{title}}</h3>' +
            '<h3>Template data.title: {{data.title}}</h3>' +
            '</div>'

现在意味着只有模板 {{} data.title} 得到更新。 再有，为什么不把其他3绑定？

Now means that only template {{data.title}} gets updated. Again, why not the other 3 bindings?

我希望有盯着我的脸明显的东西，我很想念它。如果你让我得到这个，我给你买啤酒，或者给你一些点，或其他一些这样的事情。非常感谢。

I hope there is something obvious staring me in the face and I'm missing it. If you get me to get this, I'll buy you a beer, or give you some points, or some other such thing. Many thanks.

推荐答案

您小提琴创建三个范围：

Your fiddles create three scopes:


  1. 与控制器相关的范围控制，因为 NG-控制器

  2. 指令transcluded范围，因为 transclude的：真正的

  3. 指令隔离范围，因为范围：{...}

  1. a scope associated with controller Ctrl, because of ng-controller
  2. a directive transcluded scope, because of transclude: true
  3. a directive isolate scope, because of scope: { ... }

在fiddle1，才键入任何内容到文本框中，我们有以下几点：

In fiddle1, before we type anything into the text box we have the following:

范围003是与控制器相关联的范围。由于我们没有输入到文本框中到目前为止，还没有数据属性。在隔离范围004，我们可以看到，标题财产被创建，但它是空的。因为父范围不具有 data.title 属性但它是空的。

Scope 003 is the scope associated with the controller. Since we didn't type into the textbox yet, there is no data property. In isolate scope 004, we see that a title property was created, but it is empty. It is empty because the parent scope doesn't have a data.title property yet.

后键入我的标题到文本框中，我们现在有：

After typing my title into the textbox, we now have:

控制范围003现在有一个新的数据对象属性（这就是为什么它被标记为黄色），其中有一个标题属性现在设置为我的标题。由于分离scope属性标题是单向数据绑定到 data.title 的插值，也得到值我的标题（数值为黄色，因为它改变了）。

Controller scope 003 now has a new data object property (which is why it is colored yellow), which has a title property now set to my title. Since isolate scope property title is one-way databound to the interpolated value of data.title, it also gets the value my title (the value is colored yellow because it changed).

该transcluded范围中典型从控制器范围继承，所以transcluded HTML里面，角度可以按照原型链并找到 $ scope.data.title 父范围（但 $ scope.title 不存在那里）。

The transcluded scope prototypically inherits from the controller scope, so inside the transcluded HTML, angular can follow the prototype chain and find $scope.data.title in the parent scope (but $scope.title doesn't exist there).

该分离范围仅拥有其自身的属性访问，因此只有房地产标题。

The isolate scope only has access to its own properties, hence only property title.

在fiddle2，打字之前，我们有相同的图片作为fiddle1。

In fiddle2, before typing we have the same picture as in fiddle1.

后键入我的标题：

通知，其中新的 data.title 财产出现了 - 在transcluded范围。该分离的范围仍在寻找 data.title 控制器上的范围，但它不存在这个时间，所以它的标题属性值保持为空。

Notice where the new data.title property showed up -- on the transcluded scope. The isolate scope is still looking for data.title on the controller scope, but its not there this time, so its title property value remains empty.

在fiddle3，打字之前，我们有相同的图片作为fiddle1。

In fiddle3, before typing we have the same picture as in fiddle1.

后键入我的标题：

通知，其中新的 data.title 财产出现了 - 在隔离范围。在其他范围都没有进入隔离范围，因此字符串我的标题将不会出现在其他地方。

Notice where the new data.title property showed up -- on the isolate scope. None of the other scopes have access to the isolate scope, so the string my title won't appear anywhere else.

更新为V1.2角：

通过改变<一href=\"https://github.com/angular/angular.js/commit/eed299a31b5a6dd0363133c5f9271bf33d090c94\">eed299a现在的角度清除transcluding前transclusion点，因此模板标题：... 和模板data.title：... 部分不会出现，除非你修改模板，使得 NG-transclude 是由本身，如：

With change eed299a Angular now clears the transclusion point before transcluding, so the Template title: ... and Template data.title: ... parts won't show up unless you modify the template such that ng-transclude is by itself, such as:

'<h3>Template title: <span style="color:red">{{title}}</span></h3>' +
'<h3>Template data.title: <span style="color:red">{{data.title}}</span></h3>' +
'<div ng-transclude></div>'

在下面的角度V1.3更新，该模板变化的。

In the update below for Angular v1.3, this template change was made.

更新为V1.3角+：

由于角V1.3中，transcluded范围现在是指令的范围隔离的孩子，而不是控制范围的子项。所以在fiddle1，才键入任何内容：

Since Angular v1.3, the transcluded scope is now a child of the directive's isolate scope, rather than a child of the controller scope. So in fiddle1, before we type anything:

在本次更新中的图片绘制的围$范围工具，所以拍出来的照片有点不同。在 @ 表示，我们有一个使用 @ 语法一个隔离范围属性和粉红色的背景意味着刀具是无法找到映射的祖先引用（这是真的，因为我们没有到文本框中键入任何东西）。

The pictures in this update are drawn with the Peri$scope tool, so the pictures are a bit different. The @ indicates we have an isolate scope property that uses the @ syntax, and the pink background means that the tool was unable to find an ancestor reference for the mapping (which is true, since we didn't type anything in to the textbox yet).

后键入我的标题到文本框中，我们现在有：

After typing my title into the textbox, we now have:

隔离使用属性 @ 绑定将始终显示在 @ 符号后的分离范围内插字符串结果。围$范围也能找到祖先范围这个确切的字符串值，因此，也显示该属性的引用。

Isolate properties that use @ binding will always show the interpolated string result in the isolate scope after the @ symbol. Peri$scope was also able to find this exact string value in an ancestor scope, so it also shows a reference to that property.

在小提琴2，输入我们有相同的图片作为前fiddle1

In fiddle 2, before typing we have the same picture as in fiddle1.

后键入我的标题：

通知，其中新的 data.title 财产出现了 - 在transcluded范围。该分离的范围仍在寻找 data.title 控制器上的范围，但它不存在这个时间，所以它的标题属性值保持为空。

Notice where the new data.title property showed up -- on the transcluded scope. The isolate scope is still looking for data.title on the controller scope, but its not there this time, so its title property value remains empty.

在fiddle3，打字之前，我们有相同的图片作为fiddle1。

In fiddle3, before typing we have the same picture as in fiddle1.

后键入我的标题：

通知，其中新的 data.title 财产出现了 - 在隔离范围。尽管transcluded范围先后获得通过 $父关系分离的范围，也不会在那里寻找标题或 data.title - 它只会看在控制范围内（即，它会按照原型继承），而这些属性中定义的控制器范围没有

Notice where the new data.title property showed up -- on the isolate scope. Even though the transcluded scope has access to the isolate scope via the $parent relationship, it won't look there for title or data.title -- it will only look in the controller scope (i.e., it will follow the prototypal inheritance), and the controller scope doesn't have these properties defined.

这篇关于困惑Angularjs transcluded和隔离示波器和放大器;绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆