Question

我有一个下拉形式的指令，非常简单。用户可以单击按钮在ul中添加所需数量的按钮，进行选择并将其保存。这都在几个ng-repeat之内。

我在掌握范围方面遇到了麻烦。正如我所料，这有效：

<div ng-repeat="group in groups" question-group="group" class="question-group">
  <div ng-repeat="question in questions">
    <ul>
      <li ng-repeat="case in question.cases"></li>
      <li><new-case group='group'></new-case></li>
    </ul>
  </div>
</div>

当我说＆＃34;工作＆＃34;时，我的意思是group的范围正确（整个group的数据对于结果输入是必需的。）

当我将其切换到＆＃34;点击添加＆＃34;：

<div ng-repeat="group in groups" question-group="group" class="question-group">
  <div ng-repeat="question in questions">
    <ul>
      <li ng-repeat="case in question.cases"></li>
      <li><a href="#" ng-click="createNewCase($event)">add case</a></li>
    </ul>
  </div>
</div>

范围内的

group为undefined。这是我的createNewCase函数：

function createNewCase($event) {
  var thisLi = angular.element($event.target).closest('li');
  var listItem = $compile('<li><new-case group=\'group\'></new-case></li>');
  var html = listItem($scope);
  thisLi.before(html);
}
$scope.createNewCase = createNewCase;

newCase指令：

angular.module('groups.directives.newCaseDirective', [])
    .directive('newCase', ['$window', function() {
        return {
          restrict: 'EA',
          scope: { group: '=' },
          templateUrl: 'groups/views/newcase.tpl.html'
        };
      }]);

我已经读了好几天了，我已经尝试了一些其他的衍生品，但我最终还是没有得到它。非常感谢帮助。

谢谢！

Answer 1

问题是group由ng-repeat创建，仅在ng-repeat的子范围内可用。

每个重复的元素都在它自己的子范围内。因此，您的指令版本可以正常工作，但您的另一个版本不起作用，因为控制器没有看到这些子范围。

如果要在控制器中访问它，则必须将group作为函数的参数传递

<a href="#" ng-click="createNewCase($event, group)">

Angularjs在具有隔离范围的ng-repeat内编译指令

1 个答案: