Question

我有两个指令，一个包含公共值和内部指令的包装器，在控制器中我有一个对象element

在模板中

<div wrapper="element">
  <div inner="name"></div>
  <div inner="lastname"></div>
</div>

示例：我想要内部指令中的bind element.name属性，内部指令是一个复杂的小部件

我试图从内部通过包装器访问element，我是如何实现它的？

包装器指令

{
  scope: {
    wrapper: '='
  }
}

内部指令

{
  require: '^wrapper',
  scope: {
    inner: '@'  
  }
}

在内部指令模板

中

<input type="text" ng-model="$parent.wrapper[inner]" />

不工作！

注意：我不希望为每个内部指令设置模型，示例

<div wrapper="element">
  <div inner="name" model="element.name"></div>
  <div inner="lastname" model="element.lastname"></div>
</div>

Answer 1

如果$parent，ng-repeat，... {/ p>创建了任何中间范围，

ng-include可能无法正常工作

正确的方法是使用require：

在您的父级中，定义一个控制器：

{
  scope: {
    wrapper: '='
  },
  controller: function ($scope) {
     this.scope = $scope;
  }
}

在你的内心指示中：

{
  require: "^wrapper",
  scope: {
    inner: '@'  
  },
  link: function (scope, element, attrs, wrapperController){
     scope.wrapperScope = wrapperController.scope;
  }
}

在内部指令模板

中

<input type="text" ng-model="wrapperScope.wrapper[inner]" />

访问父指令$ scope

1 个答案: