Angularjs不同的控制器之一包括

Question

我想有元素，我可以有2個視圖使用自己的控制器，但一次只有一個。 我無法使用ng-view並使用routeProvider，因爲將來我需要包含更多的ng-includes，這些ng-includes需要根據可能的操作更改其內容。

我創建了一個小提琴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}); 
    } 
}; 
}); 

我知道這個解決方案是壞的，因爲當一個不同的模板被插入，所以我的事件監聽器將不會觸發尚未創建的控制器。我也可以銷燬以前的控制器實例，因爲在兩個控制器之間切換會使我的事件觸發多次。

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); 
}); 
} 

Answer 1

您不需要廣播（也不應該廣播）來實現此目的。 根據我的經驗，如果您在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不會簡單地向CSS添加「display：none」。它從DOM中刪除它。

一些注意事項：

• 上面的例子可能不是工作的例子，它的想法的演示。 這裏可以看到一個工作示例：http://jsbin.com/ofakes/1它修改您的原始代碼。
• JSFiddle在加載頁面腳本 標籤中的include時遇到了一些問題。
• JSBin稍微好一點。
• 直到我將模板 打開到自己的文件中，我才真正地按預期工作。