在自定義指令中時，AngularJS模板變量未呈現

Question

我在使用自定義角度指令時遇到問題。 基本上，在下面的示例中，如果變量“名稱”超出指令范圍，則不會正確呈現，但如果不在指令范圍內，則將正確呈現。

模板：

<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
    }
  };
});

我已經用compile和controller指令函數為空（以排除我的指令中引起問題的東西）進行了測試，並獲得了相同的結果。

我相當確定這是一個范圍問題，但無法弄清楚如何解決它。 看來我某種程度上需要允許指令繼承控制器的作用域？ 我假設由於指令位於控制器內部，所以很好。

還有其他人遇到嗎？

謝謝你的幫助！

Answer 1

在指令中聲明scope后，它即成為隔離的作用域，因此父作用域中的變量並不相同。

有幾種方法可以解決：

一種是在表達式中使用父范圍。 嵌套作用域嵌套在父對象中，因此您可以執行以下操作：

{{$parent.name}}

如果嵌套深度為2級，則可以使用$parent.$parent.name但是這種方法很難看

或將變量作為屬性傳遞給指令，並以與edit相同的方式將其包括在指令范圍內

Answer 2

scope: { }

創建一個隔離的作用域，這意味着您無法訪問父作用域及其上定義的所有內容。

您可以使用$ parent.name訪問父作用域名稱變量。 但是我不建議使用$ parent遍歷作用域。

而是將名稱作為屬性傳遞給指令。

我創建了一個插件來演示如何執行此操作： http ://plnkr.co/edit/NGNMfkgNMooq0Sul6HPH?p=preview