angularjs嵌套指令範圍隔離隱藏父指令對象

我希望創建一個有序頂部，父和子嵌套指令。angularjs嵌套指令範圍隔離隱藏父指令對象

<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。

來源

2016-04-27 barteloma

當然，你不能，這就是所有的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}}" 
    } 
})

來源

2016-04-27 08:29:03 Walfrat

如果我通過調整匯率nt對象來分，我有兩種方法。我不會設置父母的隔離範圍。或者如果我隔離父級的範圍，我應該在子指令中使用require來訪問父級控制器。 – barteloma

這正是我所做的，我訪問父控制器而不是範圍，你如何使用ng-model來實現，以及角度消息是如何工作的。在指令之間使用範圍僅僅是一個非常糟糕的想法IMO。 – Walfrat

這是一種不同的方法解決方案 - Fiddle

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>

來源

2016-04-27 08:57:11

angularjs嵌套指令範圍隔離隱藏父指令對象

回答

相關問題