3

在我的应用程序中，我有一个wrapper控制器，可以根据其中动态处理一些属性other-controllers。如果加载时存在/静态，那么一切都像魅力一样other-controllers，但是一旦我试图使它们动态化，它们就会停止工作。

我的理解是$rootScope可以从app.

我的 JS 看起来像这样：

  var webApp = angular.module("webApp",[]);

  webApp.controller("ControllerA", function($scope, $rootScope){
    $rootScope.cnt = 0;
    $rootScope.cntPlusPlus = function(){
      $rootScope.cnt++;
    };

    $rootScope.controllerBs = [];
    var template = $(".controller-b").html();
    $scope.addControllerB = function(){
      $rootScope.controllerBs.push(template);
    };
  });

  webApp.controller("ControllerB", function($scope, $rootScope){
    $scope.cntPlusPlus = function(){
      console.log("overwrite plus plus");
    }
  });

完整示例：http ://plnkr.co/edit/tAcv1F9y7t9q9XsQ1EFL?p=preview

我知道这可能会更好directives，但是有没有办法让它与控制器一起工作？

谢谢您的帮助

4

1 回答 1

3

  1. 不要尝试从控制器代码访问 DOM。绝不。这是一种非常糟糕的做法，它打破了 AngularJS 的约定并最终为您提供了糟糕的架构。这也意味着您不应该从控制器手动创建任何 DOM 元素。

    最好用示波器本身来操作，而不是用它的视觉表示。您可以在按钮单击时将新模型添加到范围内，这些模型将通过ng-repeat指令转换为新元素，每个元素都有自己的控制器（请记住，控制器是实例，而不是单例，因此它们具有分离的生命周期）。

  2. 您可能想在这里使用<script type="text/ng-template">andng-include而不是 hidden divs。

  3. 尽可能避免使用$rootScope- 这是一种危险的全局状态。

它可能看起来像这样（plunker）：

HTML：

<div class="controller-a" ng-controller="ControllerA">
  Controller A
  <div>
    <button ng-click="cntPlusPlus()">cnt++</button> CNT: {{cnt}}
  </div>
  <button ng-click="addB()">Add B</button>
  <div ng-repeat="B in Bs">
   <div ng-include="'b-template'"></div>
  </div>
</div>
<script type="text/ng-template" id="b-template">
  <div ng-controller="ControllerB">this is controller b: <button ng-click="cntPlusPlus()">cnt++</button></div>
</script>

JS：

  var webApp = angular.module("webApp",[]);
  
  webApp.controller("ControllerA", function($scope){
    $scope.cnt = 0;
    $scope.cntPlusPlus = function(){
      $scope.cnt++;
    };
    
    $scope.Bs = [];
    $scope.addB = function(){
      $scope.Bs.push({});
    };
  });
  
  webApp.controller("ControllerB", function($scope){
    $scope.cntPlusPlus = function(){
      console.log("overwrite plus plus");
      $scope.$parent.$parent.$parent.cnt++;  //should be moved to service
    }
  });      
</script>
于 2013-08-14T20:53:58.477 回答