angularjsネストされたディレクティブのスコープ分離隠蔽親ディレクティブオブジェクト

Question

は、私がトップ、親とサブを命じ、ネストされたディレクティブを作成したいです。

<div ng-app="app"> 
    <top> 
    <parent> 
     <sub global-name="global"></sub> 
    </parent> 
    </top> 
</div> 

そして、私のjsvascriptは次のとおりです。

angular.module("app",[]); 

angular.module("app").directive("top",function(){ 
    return { 
       restrict: "E", 
     transclude: true, 
     template: "<div ng-transclude></div>" 
    } 
}); 

angular.module("app").directive("parent", function(){ 
     return { 
      restrict: "E", 
     controller: function($scope){ 
       $scope.global = { 
        name: "parent directive" 
      }; 
     }, 
     link: function(scope){ 

     }, 
     transclude: true, 
     template: "<div ng-transclude></div>" 
    } 
}); 

angular.module("app").directive("sub", function(){ 
     return { 
      restrict: "E", 
     require:"^parent", 
     scope: { 
       global: "=globalName" 
     }, 
     controller: function(){ 

     }, 
     link: function(scope){ 
       scope.title = scope.global; 
      console.log(scope.global); 
     }, 
     template: "{{global.name}}" 
    } 
}); 

これが働いています。 JSfiddle codeはこちらです。しかし;

私は親ディレクティブのスコープを分離する場合、私はサブディレクティブから親のglobalオブジェクトにアクセスすることはできません。

angular.module("app").directive("parent", function(){ 
     return { 
      restrict: "E", 
     controller: function($scope){ 
       $scope.global = { 
        name: "parent directive" 
      }; 
     }, 
     link: function(scope){ 

     }, 
     transclude: true, 
     template: "<div ng-transclude></div>", 
     scope: {} 
    } 
}); 

これは機能しません。 Jsfiddle is here。あなたの親とサブディレクティブの両方が分離株のスコープを持っているので、あなたがすることはできませんもちろん

Answer 1

、それはisoltedスコープのすべてのポイントですが、これは動作しません。

あなたは親/子関係を有する2ディレクティブを持つようにしたい場合は、あなたが親にサブディレクティブからと通信するために、親のコントローラのAPIを使用しています。

チェックはこのフィドル：https://jsfiddle.net/tp1pc31z/

angular.module("app").directive("parent", function(){ 
     return { 
      restrict: "E", 
     controller: function($scope){ 
       this.global = {name:"parent directive"}; 
     }, 
     link: function(scope){ 

     }, 
     transclude: true, 
     template: "<div ng-transclude></div>", 
     scope: {} 
    } 
}); 

angular.module("app").directive("sub", function(){ 
     return { 
      restrict: "E", 
     require:"^parent", 
     scope:{}, 
     controller: function(){ 

     }, 
     link: function(scope, element, attr, parentCtrl){ 
      console.log("parent : "+parentCtrl); 
       scope.title = parentCtrl.global; 
      console.log(scope.title.name); 
     }, 
     template: "Global : {{title.name}}" 
    } 
}) 

Answer 2

ここでは異なるアプローチでソリューションです - Fiddle

JS

angular.module("app",[]); 

angular.module("app").directive("top",function(){ 
    return { 
     restrict: "E", 
     template: "<parent></parent>" 
    } 
}); 

angular.module("app").directive("parent", function(){ 
    return { 
     restrict: "E", 
     controller: function($scope){ 
      $scope.global = { 
       name: "parent directive" 
      }; 
     }, 
     link: function(scope){ 

     }, 
     template: "<sub global='global'></sub>", 
     scope: {} 
    } 
}); 

angular.module("app").directive("sub", function(){ 
    return { 
     restrict: "E", 
     scope: { 
      global: "=" 
     }, 
     controller: function(){ 

     }, 
     link: function(scope){ 
      scope.title = scope.global; 
      console.log(scope.global); 
     }, 
     template: "{{global.name}}" 
    } 
}); 

マークアップ

<div ng-app="app"> 
    <top> 
    </top> 
</div>