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. hidden の代わりに<script type="text/ng-template">andを利用したいかもしれません。ng-includediv

  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 に答える