AngularJS 模板变量在自定义指令中时不呈现

AngularJS template variables not rendering when inside custom directive

本文关键字：指令 自定义 变量 AngularJS      更新时间：2023-09-26

我在自定义角度指令方面遇到了问题。基本上，在下面的示例中，变量 "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
    }
  };
});

我已经在编译和控制器指令函数为空的情况下对此进行了测试（以排除我的指令中导致问题的某些内容）并获得相同的结果。

我相当确定这是一个范围问题，但无法弄清楚如何解决它。似乎我需要以某种方式允许指令继承控制器的作用域？我假设由于指令在控制器内部，所以会很好。

还有其他人遇到过这种情况吗？

感谢您的帮助！

scope: { }

创建一个隔离的作用域，这意味着您无法访问父作用域及其上定义的所有内容。

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

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

我创建了一个 plunker 来演示如何做到这一点：http://plnkr.co/edit/NGNMfkgNMooq0Sul6HPH?p=preview

一旦你在指令中声明scope，它就是一个孤立的作用域，因此父作用域中的变量是不一样的。

有几种方法可以处理：

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

{{$parent.name}}

如果嵌套是 2 级深度，则可以使用 $parent.$parent.name 但这种方法变得丑陋

或者将变量作为属性传递给指令，并将其包含在指令范围内，就像处理edit一样

相关文章：