angularjs – 带有模板的指令和没有模板的范围在Angular 1.2和1.

发布时间：2020-12-17 17:45:16 所属栏目：安全来源：网络整理

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!