Question

我现在想要解决的问题，

如果我有一个控制器，AController，带有变量

scope.test = '123';

和指令，

.directive('aDirective', function() {
  return {
    scope: {
      test: '@aTest'
    }
  }
});

使用HTML

<div ng-controller="AController">
  <div a-directive a-test="abc{{test}}">
    <h4>{{test}}</h4>
  </div>
</div>

h4标签内的测试范围在哪里，即嵌套在指令div中。我希望它是隔离范围，h4包含＆＃39; abc123＆＃39;但它似乎从控制器获得范围。这是因为指令测试var是用readonly @标签指定的吗？我在这里创建了一个类似的示例：http://jsfiddle.net/f46df2gn/

赞赏任何想法

C

Answer 1

确实a-directive的内容对指令的隔离范围一无所知。

如果要访问隔离范围，则应使用模板（通过template或templateUrl）。隔离范围也可用于预连接和后连接功能以及指令控制器（如果有）。

E.g：

.directive('aDirective', function () {
    return {
        scope: {
            test: '@aTest'
        },
        template: '<h4>{{test}}</h4>'
    };
});

<div ng-controller="AController">
    <div a-directive a-test="abc{{test}}"></div>
</div>

另请参阅此 modified demo 。

<子> 如果要保留元素的内容（在视图中指定 - 将绑定到父，非隔离范围）以及让指令添加自己的内容（绑定到其隔离范围），您应该查看 ngTransclude 和一般的翻译但要注意，它是一个有点高级的主题，所以请务必先了解指令的基础知识。
_{（事实上，使用transclusion可以将视图中定义的内容绑定到隔离范围，但它是一个相当高级的转换用例。）}

指令div中的范围在哪里

1 个答案: