区别在模板和模板没有和角1.2和1.1之间的指令之间的范围？ [英] Difference in scope between directive with template and without template AND between Angular 1.2 and 1.1?

问题描述

我是新来的角，并试图了解先进的指令API - 我想在编译功能使用指令元素属性重新创建指令模板。
但是，当我没有一个模板集（或模板为空字符串），而不是孤立的accesing范围指令访问我的父（控制器）范围。此外 - 这工作对角1.1而不是1.2

I am new to Angular and trying to understand advanced directive API - I want to re-create directive template in compile function using directive element attributes. But when I don't have a template set (or template is empty string) instead accesing isolated directive scope I access parent (controller) scope. Also - this works on Angular 1.1 but not 1.2

下面是HTML：

<div class="container" ng-app="app" ng-controller="AppController">
      <sandbox title="Attribute Title"></sandbox>
</div>

JavaScript的：

JavaScript:

var app = angular.module('app', [], function () {});

app.controller('AppController', function ($scope) {
    $scope.title = "AppController title";
});

app.directive('sandbox', function ($log, $compile) {
    return {
        restrict: 'E',
        scope: {
            title: "@"
        },
        controller: function ($scope, $element, $attrs) {
            $scope.title = "Directive Controller title";
        },
        template: '<h1>Template</h1>', // change it to: '' and Run, than change Angular to 1.2.x
        compile: function (tElement, tAttrs) {
            tElement.append('<h2> Title = {{ title }}</h2>');
        }
    }

});

当你运行它，你可以：

模板

标题=属性标题

但是，当你改变模板，您角1.2得到空字符串：

But when you change template to empty string you get with Angular 1.2:

标题= AppController的标题

和与角1.1.1：

标题=属性标题

我的问题：

为什么在accesing范围差异，当模板设置，当它没有设置？

为什么有角1.1和1.2之间的差异（错误 - 没有'与isoleted范围template'and访问非常指令控制器范围没有指令范围）？

如何建立，在编译函数访问隔离范围不父范围在1.2角模板？

为什么使用$ scope.title =...指令的控制器功能不改变'标题' - 但在调试链接功能标题范围参数时，值指令的Controler标题但在内部（在哪里寻找它）结合isoleted范围'属性'？

下面是的jsfiddle一起玩： http://jsfiddle.net/yoorek/zQ66L/4/

Here is JSFiddle to play with: http://jsfiddle.net/yoorek/zQ66L/4/

推荐答案

您已经击中在1.2发生了很大的变化（在使用怪癖@）。

You've hit on a big change that happened in 1.2 (and a quirk in using "@").

1）：当您的模板``角度认为没有模板的分离范围适用。原因这是一个1.2的问题是在回答你的第二个问题。

1) When your template is `` Angular sees no template to apply the isolate scope to. The reason this is an issue in 1.2 is in the answer to your second question.

2）这是这个1.2的破变化 - 使真正隔离范围的结果隔离：

2) This is a result of this 1.2 breaking change- make isolate scope truly isolate:

隔离范围，现在只可用于要求它和它的模板分离指令。

Isolate scope is now available only to the isolate directive that requested it and its template.

所以，没有要追加到作为分离物范围以外的元素的模板。结果
从<一个href=\"https://github.com/angular/angular.js/issues/4889\">https://github.com/angular/angular.js/issues/4889:

So, without a template you're appending to an element that is outside the isolate scope.
From https://github.com/angular/angular.js/issues/4889:

由于我们无法区分的标记，这是最初在HTML文件
  和标记是在编译功能，后者还增加
  没有得到的分离范围。

As we can't distinguish markup that was originally in the html file and markup that was added in the compile function the latter also doesn't get the isolate scope.

和

...在编译功能附加标记应通过使用替代
  模板属性。结果
  我们的想法是，模板属性也可以是一个函数。如果它
  是的，它会得到编译元素和属性编译作为
  参数。

...additional markup in the compile function should be replaced by using the template property.
The idea is that the template property can also be a function. If it is one, it will get the compile element and the compile attributes as parameters.

3）如您在上面看到，角（后1.2）确实在努力推你使用的模板，而不是这里的编译功能。最好的办法是有可能在你使用的编译方式使用模板函数。另外，您可以使用链接功能以 $编译 - 但这可能会增加不必要的复杂性。

3) As you see above, Angular (post 1.2) is really trying to push you to use the template instead of the compile function here. Your best bet is likely to use a template function in the manner you were using compile. Alternatively you could use a link function with a $compile- but that may be adding unneeded complexity.

这是你刚才有效增加了模板，因此它的一种解决此得到编译函数内追加。

By appending inside the compile function you're effectively just adding to the template so it's kind of getting around this.

4）这与顺便做 @ 的作品。从 Angulars引导作用域：

4) This has to do with the way @ works. From Angulars guide to scopes:

使用ATTRS。$观察链接（'attr_name'，功能（价值）{...}
  函数来得到分离作用域属性的插值
  使用的'@'符号。例如，如果我们在链接有这
  功能 - ATTRS观察$（'插'，功能（价值）{...} -
  值将被设置为11（scope.interpolatedProp在未定义
  联的功能。与此相反，scope.twowayBindingProp中定义
  所述连接功能，因为它使用了=表示法。）

use attrs.$observe('attr_name', function(value) { ... } in the linking function to get the interpolated value of isolate scope properties that use the '@' notation. E.g., if we have this in the linking function -- attrs.$observe('interpolated', function(value) { ... } -- value would be set to 11. (scope.interpolatedProp is undefined in the linking function. In contrast, scope.twowayBindingProp is defined in the linking function, since it uses the '=' notation.)

你也可以阅读<一href=\"http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope\">SO张贴在@和=

这篇关于区别在模板和模板没有和角1.2和1.1之间的指令之间的范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！