Question

我遇到了自定义角度指令的问题。基本上，在下面的示例中，如果在指令范围之外，变量“name”将正确呈现，但在指令内部则不会。

模板：

<div ng-controller="swygController">
  <div swyg="example" edit="load(id)">
    {{name}}
  </div>
  {{name}
</div>

指令：

swyg.directive('swyg', function(){
  return {
    restrict: 'A',
    scope: {
      edit: '&'
    },
    compile: function(elm, attr){
      // Code
    },
    controller: function($scope, $element, $attrs) {
     // Code
    }
  };
});

我已经用编译和控制器指令函数测试了这个函数（在我的指令中排除导致问题的东西）并获得相同的结果。

我很确定这是一个范围问题，但无法弄清楚如何解决它。似乎我不知何故需要允许指令继承控制器的范围？我假设因为指令在控制器内，所以没关系。

有没有其他人遇到这个？

感谢您的帮助！

Answer 1

只要在指令中声明scope，它就是一个孤立的范围，因此来自父范围的变量不一样。

有几种方法可以解决：

一个是在表达式中使用父范围。嵌套范围嵌套在父对象中，因此您可以执行以下操作：

{{$parent.name}}

如果嵌套深度为2级则可以使用$parent.$parent.name，但这种方法很难看

或者将变量作为属性传递给指令，并将其包含在指令范围内，与使用edit

时相同。

Answer 2

scope: { }

创建一个独立的范围，这意味着您无法访问父范围及其上定义的所有内容。

您可以使用$ parent.name来访问父作用域名称变量。但我不建议使用$ parent遍历范围。

而是将名称作为属性传递给您的指令。

我创建了一个plunker来演示如何执行此操作： http://plnkr.co/edit/NGNMfkgNMooq0Sul6HPH?p=preview

在自定义指令内部时，AngularJS模板变量无法呈现

2 个答案: