为什么具有隔离范围的指令不将范围应用于其 DOM 元素? [英] Why doesn't a directive with an isolate scope apply the scope to it's DOM element?

问题描述

我正在尝试弄清楚 AngularJS 作用域是如何工作的.我也很好奇他们为什么这样工作.我认为以下行为没有意义(fiddle 1).

<p>外部元素的作用域:{{$id}}</p><custom-directiveisolate-value="你好！"><p>内部元素的作用域:{{$id}}</p><p>隔离值:{{isolateValue ||'未定义'}}</p></custom-directive>
函数指令(){返回 {限制:'E'，范围:{isolateValue:@"}，链接:功能(范围，元素，属性){console.log("隔离作用域:" + scope.$id);console.log("隔离值:" + scope.isolateValue);}};}有角的.module('app',[]).directive('customDirective', 指令);

我希望视图打印isolate value: Hello!"但我得到未定义":

外部元素的作用域:1内部元素的范围:1隔离值:未定义

DOM 元素及其内容保留在父作用域 (id = 1) 中，从而阻止视图访问正确的作用域 (id = 2).将 HTML 代码移动到模板中使其按预期工作(fiddle 2)但它与我的初始将指令用作可重用组件的要点(即相同的数据，不同的视图).

我使它与嵌入一起工作(fiddle 3)，但由于需要，感觉有点笨拙使用 $parent 属性引用正确的作用域(嵌入会创建另一个作用域).

那么，这个指令与 DOM 隔离范围不匹配的事情背后有什么隐藏的含义吗?或者也许可以以某种方式将 DOM 范围调整为隔离范围?

解决方案

使用终端:true 和 $compile 自己.

http://jsfiddle.net/SE_YOU/rrzrtL4e/

function 指令($compile) {返回 {限制:'EA'，终端:真的，范围:{isolateValue:@"}，链接:函数(范围，元素，属性){console.log("隔离作用域:" + scope.$id);console.log("隔离值:" + scope.isolateValue);$compile(element.contents())(scope);}};}有角的.module('app',[]).directive('customDirective', 指令);

I'm trying to figure out how AngularJS scopes work. I'm also curious why they work the way they do. I think the following behavior doesn't make sense (fiddle 1).

<div ng-app="app">
    <p>outer element's scope: {{$id}}</p>
    <custom-directive isolate-value="Hello!">
        <p>inner element's scope: {{$id}}</p>
        <p>isolate value: {{isolateValue || 'undefined'}}</p>
    </custom-directive>
</div>

function Directive() {
    return {
        restrict: 'E',
        scope: { isolateValue: "@" },
        link: function(scope, element, attributes) {
            console.log("isolate scope: " + scope.$id);
            console.log("isolate value: " + scope.isolateValue);
        }
    };
}

angular
    .module('app',[])
    .directive('customDirective', Directive);

I'm expecting the view to print "isolate value: Hello!" but I get "undefined" instead:

outer element's scope: 1
inner element's scope: 1
isolate value: undefined

The DOM element and its contents remain in the parent scope (id = 1) thus preventing the view from accessing the correct scope (id = 2). Moving the HTML code into a template makes it work as expected (fiddle 2) but it conflicts with my initial point of using the directive as a reusable component (i.e. same data, different views).

I made it work with transclusion (fiddle 3) but it feels somewhat hacky because of the need to refer to the correct scope with $parent property (transclusion creates one more scope).

So, it there some hidden meaning behind this directive vs. DOM isolate scope mismatch thing? Or maybe DOM scope can be somehow tuned to the isolate one?

解决方案

Use terminal: true, and $compile yourself.

http://jsfiddle.net/SE_YOU/rrzrtL4e/

function Directive($compile) {
    return {
        restrict: 'EA',
        terminal: true,
        scope: { isolateValue: "@" },
        link: function(scope, element, attr) {
            console.log("isolate scope: " + scope.$id);
            console.log("isolate value: " + scope.isolateValue);
            $compile(element.contents())(scope);
        }
    };
}

angular
    .module('app',[])
    .directive('customDirective', Directive);

这篇关于为什么具有隔离范围的指令不将范围应用于其 DOM 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！