0

独自のコントローラーを使用して2つのビューを持つことができる要素が必要ですが、一度に1つだけです。ng-viewを使用してrouteProviderを使用することはできません。将来、可能なアクションに応じてコンテンツを変更する必要があるng-includeをさらに含める必要があるためです。

フィドルhttp://jsfiddle.net/EvHyT/29/を作成しました。

そこで、ng-includeを使用して、メインコントローラーからそのsrcを設定しました。その時点で、コントローラー1またはコントローラー2を使用します。

function MainCtrl($rootScope, $scope, navService){
$scope.template = {};

$scope.loadCtrl1=function(param){
    navService.loadCtrl1(param);
}

$scope.loadCtrl2=function(param){
    navService.loadCtrl2(param);
}

$rootScope.$on('loadCtrl1', function(e, args){
    $scope.template = {'url': 'temp1'};
});

$rootScope.$on('loadCtrl2', function(e, args){
     $scope.template = {'url': 'temp2'};       
});
}

子コントローラーの負荷コントローラー機能を移動したいので、通信サービスを利用しています。

var myApp = angular.module('myApp',[]);


myApp.factory('navService', function($rootScope) {
return {
     loadCtrl1:function(param){
        $rootScope.$broadcast('loadCtrl1', {'id':param});   
    },

    loadCtrl2:function(param){
        $rootScope.$broadcast('loadCtrl2', {'id':param});
    }
};
});

別のテンプレートが挿入されたときにコントローラーがまだ作成されていないため、このソリューションが悪いことはわかっています。そのため、イベントリスナーは起動しません。また、2つのコントローラーを切り替えるとイベントが複数回発生するため、コントローラーの以前のインスタンスを破棄できますか。

function Child1Ctrl($scope, $rootScope){
 $rootScope.$on('loadCtrl1', function(e, args){
   alert(args.id);
});
}

function Child2Ctrl($scope, $rootScope){

$rootScope.$on('loadCtrl2', function(e, args){
      alert(args.id);
});
}
4

1 に答える 1

2

これを実現するためにブロードキャストする必要はありません (ブロードキャストする必要はありません)。私の経験では、rootScope でブロードキャストしている場合は、おそらく働きすぎです。

テンプレートをロードするより簡単な方法は、あなたがしていることと非常によく似ています:

my.NavService = function() {
  this.template = 'index.html';
  this.param = null;
};
my.NavService.prototype.setTemplate(t, p) {
  this.template = t;
  this.param = p;
};

my.ctrl = function($scope, nav) {
   $scope.nav = nav;
   $scope.load = function(t, p) {
     nav.setTemplate(t, p);
   };
};

my.ctrl1 = function($scope, nav) {
  $scope.param = nav.param;
};

my.ctrl2 = function($scope, nav) {
  $scope.param = nav.param;
};

module.
  service('nav', my.NavService).
  controller('mainCtrl', my.ctrl).
  controller('ctrl1', my.ctrl1).
  controller('ctrl2', my.ctrl2);

<script type="text/ng-template" id="temp1.html">
  <div ng-controller="ctrl1">Foo {{param}}.</div>
</script>
<script type="text/ng-template" id="temp2.html">
  <div ng-controller="ctrl2">Bar {{param}}.</div>
</script>

<div ng-controller="mainCtrl">
  <a ng-click="load('temp1.html', 16)">Load 1</a>
  <a ng-click="load('temp2.html', 32)">Load 2</a>
  <div ng-include src="nav.template"></div>
</div>

このような設定は、あなたにとってはるかにうまくいくでしょう.

または、ng-switch を使用して要素を選択的に表示することを検討する必要があります。ng-show/hide とは異なり、ng-switch は単に「display:none」を CSS に追加するだけではありません。DOM から削除します。

いくつかのメモ:

  • 上記の例は実際の例ではないかもしれません。アイデアのデモンストレーションです。実際の例をここで見ることができます: http://jsbin.com/ofakes/1元のコードを変更します。
  • JSFiddle には、ページ上のスクリプト タグからインクルードをロードする際にいくつかの問題がありました。
  • JSBinの方が少し良かったです。
  • テンプレートを独自のファイルに分割するまで、実際には期待どおりに動作しませんでした。
于 2013-01-23T00:51:06.210 に答える