Question

我已经阅读了大部分相似的主题，但我的问题仍然没有答案。

我hava指令：

directive.repeatable = function () { return {
    restrict: 'A',
    scope: {
        data: '=repeatableData',
        add: '@'
    },
    controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        $scope.add = function() {
            console.log("ADD");
        }

    }]
}

我需要有一个独立的范围，但需要将add方法暴露给嵌套的DOM元素：

<div repeatable repeatable-data="data">
    <div ng-repeat="item in data">
      {{ item }}
    </div>
    <button ng-click="add()">Add</button>
</div>

如何访问父指令的add()方法？已尝试：$parent.add()，$scope.$parent.add()，add: '&add'。但我想我只是不明白。

P.S。我无法真正访问data指令的repeatable属性，而repeatable-data和item in data指向相同的“模型”。

Answer 1

更新

检查我的其他答案：Why I can't access the right scope?

如果您真的希望内部内容成为隔离范围的一部分，您可以这样做：

app.directive('repeatable', function () { 
  return {
    restrict: 'A',
    transclude: true,
    scope: {
        data: '=repeatableData',
        add: '@'
    },
    link: function(scope, elm, attr, ctrl, $transclude) {

      $transclude(scope, function(clone){
        elm.append(clone);
      });

      scope.add = function() {
          console.log("ADD");
      }

    }

  }  
});

AngularJS：如何将指令的方法暴露给嵌套指令，比如ng-click？

1 个答案:

更新