Angular 1.2和1.1之间的指令与模板和没有模板的范围之间的差异？

Question

我是Angular的新手,并试图理解高级指令API - 我想使用指令元素属性在编译函数中重新创建指令模板.但是当我没有模板集(或模板是空字符串)而不是访问隔离指令范围时,我访问父(控制器)范围.此外 - 这适用于Angular 1.1但不适用于1.2

这是HTML:

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

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>');
        }
    }

});

当你运行它时,你得到:

模板

标题=属性标题

但是当你将模板更改为空字符串时,你会得到Angular 1.2:

Title = AppController标题

并使用Angular 1.1.1:

标题=属性标题

我的问题:

为什么在设置模板时和未设置模板时访问范围有所不同？

为什么Angular 1.1和1.2之间存在差异(bug？ - 没有'template'的指令和isoleted范围加入控制器范围而非指令范围)？

如何在编译函数中构建访问Angular 1.2中的隔离范围而非父范围的模板？

为什么指令控制器功能不会使用$ scope.title ="..."更改'title' - 但是当'link'函数调用'scope'参数时,'title'值是'Directive Controler Title'但是它在内部(在哪里)寻找它)绑定isoleted范围'属性值'？

这是JSFiddle玩:http://jsfiddle.net/yoorek/zQ66L/4/

Answer 1

你已经遇到了1.2中发生的重大变化(以及使用"@"的怪癖).

1)当你的模板是``Angular时,看不到要应用隔离范围的模板.这是1.2中的问题的原因在于你的第二个问题的答案.

2)这是1.2破坏变化的结果 - 使隔离范围真正隔离:

隔离范围现在仅可用于请求它的isolate指令及其模板.

因此,如果没有模板,您将附加到隔离范围之外的元素.
来自https://github.com/angular/angular.js/issues/4889:

由于我们无法区分最初在html文件中的标记和在编译函数中添加的标记,后者也无法获得隔离范围.

和

...应该使用template属性替换编译函数中的其他标记.
这个想法是模板属性也可以是一个函数.如果是1,它将获得compile元素和compile属性作为参数.

3) 如上所述,Angular(1.2之后)实际上是试图让你在这里使用模板而不是编译函数.您最好的选择可能是以您使用编译的方式使用模板功能.或者,您可以使用带有$compile- 的链接功能,但这可能会增加不必要的复杂性.

通过在编译函数中附加内容,您实际上只是添加到模板中,因此它可以解决这个问题.

4)这与@工作方式有关.从Angulars指南到范围:

在连接函数中使用attrs.$ observe('attr_name',function(value){...}来获取使用'@'表示法的隔离范围属性的插值.例如,如果我们在链接函数中有这个 - attrs.$ observe('interpolated',function(value){...} - 值将设置为11.(scope.interpolatedProp在链接函数中未定义.相反,scope.twowayBindingProp在链接函数,因为它使用'='表示法.)

你也可以阅读这篇关于@和=之间差异的帖子