角度指示範圍問題

我現在有一些角度的經驗，但我仍然無法弄清楚那一個。我有一個指令2 transcluded通過另一個指令1。指令1和控制器在同一個元素上，它們共享相同的範圍。我希望指令2從控制器的範圍繼承，但不是父母/孩子，他們最終成爲兄弟姐妹。我在這裏錯過了什麼？角度指示範圍問題

下面是代碼：

angular.module('myModule', []) 
    .controller('Controller', ['$scope', function($scope) { 
     console.log('from controller', $scope); 
    }]) 
    .directive('directive1', function(){ 
     return { 
      restrict: 'A', 
      replace: true, 
      transclude: true, 
      template: '<div style="width:150px;"> <p>directive1</p>' 
      +'<div style="width:100px;" ng-transclude></div> </div>', 
      link: function($scope, elem, attrs){ 
       console.log('from directive1', $scope); 
      } 
     } 
    }) 
    .directive('directive2', function(){ 
     return { 
      restrict: 'A', 
      link: function($scope, elem, attrs) { 
       console.log('from directive2', $scope); 
      } 
     } 
    });

相關的HTML：

<div x-directive1 ng-controller="Controller"> 
    <div x-directive2> <p>directive2</p> </div> 
</div>

和鏈接到的jsfiddle：http://jsfiddle.net/RFontana/Lm7gA/1/

來源

2013-09-27 Renaud

我認爲你需要設置指令之間的分層「需求」鏈接。看看這個關於分層指令的教程http://egghead.io/lessons/angularjs-directive-communication –

問題是將ng-controller直接放在正在進行跨越的父指令上。 Transclusion directives create a new scope。創建一個包裝元素，並將ng-controller指令放在上面。

像這樣：

<section ng-controller="Controller"> 
    <div x-directive1> 
     <div x-directive2> <p>directive2</p> </div> 
    </div> 
</section>

我有forked your fiddle並放置在固定在裏面。

爲什麼內部指令被展示了作爲同級（從官方AngularJS指令文件）：

transclude - 編譯元素的內容，並將其提供給指令。通常與ngTransclude一起使用。 transclusion的優點在於，鏈接功能接收預先綁定到正確範圍的功能的功能。 在典型的設置中，窗口小部件會創建一個隔離範圍，但該隔離不是子級，而是隔離範圍的同級。這使得小部件可以擁有私有狀態，並且可以將父級（預隔離）作用域的綁定綁定到。

在你的情況下，你沒有在父指令中聲明隔離範圍，而是在父指令中聲明瞭控制器。由於控制器位於父級控制器上，因此該子級控制器的子級控制指令將成爲其父級和控制器的同級作用域。

我的建議是，避免在指令上放置ng-controller。

我希望這會有所幫助。

來源

2013-09-27 17:39:03

.directive('directive2', function() { 
    return { 
     restrict: 'A', 
     controller: 'Controller', 
     link: function(scope, elem, attrs) { 
      console.log('from directive2', scope); 
     } 
    } 
});

我不會用$範圍爲對這些鏈接函數命名參數，而是「範圍」。這使控制器的指令2，但我不認爲這真的是你想要的。你不能只是將控制器移動到一個封閉的div？然後，指令2實際上會繼承控制器範圍。

<div ng-controller="Controller"> 
    <div x-directive1> 
     <div x-directive2> <p>directive2</p> </div> 
    </div> 
</div>

來源

2013-09-27 17:22:28 aet

對作用域變量使用$ scope是一個壞主意，但不是這個問題的原因。這裏描述的問題是由第一個指令內使用* ng-transclude *引起的範圍層次結構問題，該指令也承載了* ng-controller *指令。 [我的答案]（http://stackoverflow.com/questions/19056315/angular-directive-scoping-issue/19056872#19056872）提供瞭解決方案的jsFiddle和一個鏈接到詳細的解釋。 –

角度指示範圍問題

回答

相關問題