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嵌套指令范围隔离隐藏父指令对象

回答

相关问题