微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs – 带有模板的指令和没有模板的范围在Angular 1.2和1.1之间的范围差异?

我是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/

解决方法

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

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

2)这是1.2破坏变化的结果 – make isolate scope truly isolate

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

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

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

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

4)这与@的工作方式有关.从Angulars guide to scopes

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.)

你也可以阅读这篇SO post on the difference between @ and =

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐