Question

我有如下指令，

  angular.module("sample").directive("sampleDir", [
    "$compile", function($compile) {
      return {
        restrict: "E",
        replace: true,
        scope: {
          options: '=',
          source: '='
       },
        templateUrl: "sample.html"
      };
    }
  ]);

sample.html

  <div ng-repeat="row in source" class="{{$parent.options.Class}}">
    <label value="{{row.label}}">{{row.label}}</label>
  </div>

这里面的模板“source”参数我可以这样使用。但是，需要从父作用域中获取“options”参数。如果我在外面创建另一个div，那么我可以选择参数。

我尝试在此ng-repeat div之外添加另一个div并尝试访问“options”参数工作正常。

  <div class="{{options.Class}}">
    <div ng-repeat="row in source">
      <label value="{{row.label}}">{{row.label}}</label>
    </div>
  </div>

但是为什么它不能使用ng-repeat div？

如何删除$ parent并使用“options”参数？

请帮忙，感谢。

Answer 1

知道issue。当您在指令的top元素上使用replace: true和ngRepeat时，就会发生这种情况。因此，ngRepeat绑定到外部作用域而不是孤立作用域。

您可以通过不使用替换或在指令顶部添加元素来解决它。

Answer 2

我认为范围变量名称“options”可能存在冲突。尝试将指令的范围变量更改为其他内容。

例如：您的范围定义可以更改为此

scope: {
          sampleOptions: '=',
          source: '='
       },

如果您遇到任何与语法相关的问题，this article将会很有帮助

在指令模板中，ng-repeat范围内不起作用

2 个答案: