Question

以下情况：

控制器（A＆amp; B）有两个指令 - 它们都是另一个控制器（C）的子节点。

控制器A管理其模型的内容。现在，Controller C需要调用Controller A中的函数来修改一些东西。此外，它需要访问一些属性并阅读它们。

我不确定正确的沟通方式是什么。并坚持采用一种方法。

跟进是一个小代码示例，以更具体的方式说明问题。

首先，有一个提供商，组件可以注册他们自己。

angular.module('components', [])
       .provider('db', function(){
         this.registerComponent = function(name, component){
           ...
         }
       });

现在有一个指令＆amp;控制器（A）显示具体组件。

angular.module('components')
       .directive('componentDashboard', function(){
       return {
         scope:{
           concreteComponents: '='
         },
         controller: function($scope){
           $scope.model = concreteComponents;
           $scope.model.someImportantProp = "foo";
           $scope.addComponent = function(c){...}
         }
       }
       })

这基本上就是设置。指令componentDashboard可以显示一组注册到db提供程序的组件。

有像addComponent这样的控制器函数（A）需要从控制器外部调用（控制器B想要调用它）。此外，控制器B想要访问不同的属性等等。

这样做的首选方式是什么？

目前使用这些范例：

1）工厂黑客？！基本上有一个工厂有一些功能：

angular.module('components')
        .factory('componentStub', function($log){
          return {
            addComponent : function(c){
              $log.error("stub not overwritten");
            }
          }
        })

这些功能现在被组件的指令覆盖：

angular.module('components')
   .directive('componentDashboard', function(componentStub){
   return {
     scope:{
       concreteComponents: '='
     },
     controller: function($scope){
       $scope.model = concreteComponents;
       $scope.model.someImportantProp = "foo";
       $scope.addComponent = function(c){...}
       componentStub.addComponent = function(c){
         $scope.addComponent(c);
       }
     }
   }
   })

2）基于事件

angular.module('components')
       .factory('notificationCenter', function(){
         return {
           registerToNotification: function(id, not, cb){..}
         } 
       })
       .directive('componentDashboard', function(notificationCenter){
         return {
           scope:{
             concreteComponents: '='
           },
         controller: function($scope){
           $scope.model = concreteComponents;
           $scope.model.someImportantProp = "foo";
           $scope.addComponent = function(c){...}
           notificationCenter.registerToNotification("foo",     "doAddComponent", function(c){
              $scope.addComponent(c)
            }
         }
       }
       })

目前使用两种方法。使用它有一些优点。它发展很快，只有很少的依赖性或限制。它有效。

但是！我不确定这是否是一个好方法。我在这方面遇到了一些糟糕的维护，它变得越复杂（假设有些组件可以添加而有些组件没有 - > gt;状态），感觉就越不正确。

如何处理这个问题？

很抱歉这个问题很长，谢谢你的建议

Schemii

Answer 1

有多种方法可以解决这个问题。确保它是可维护的归结为隔离：让不同的组件自己工作而不依赖于彼此。

结合以下任何一种策略（从最简单到更难实施）：

让父视图将模型（或部分模型）传递给子指令（通过属性）
$watch用于更改主控制器/指令以对更改做出反应。
让父控制器/指令寄存器（$scope.$on）回调某些事件。孩子可以$emit向父母发送事件。父母可以$broadcast向他们的孩子发送事件。
让child指令公开回调/表达式（请参阅isolate scope options中的&前缀）
共享将处理模型更改的（单例）服务实例。在需要时注入此服务。由于这是一个单例，因此每当范围被破坏时，您必须确保清理回调，否则您将泄漏内存。

希望这有帮助。

干杯。

委托angularjs

1 个答案: