하나의 Angularjs 다른 컨트롤러를 포함

Question

나는 자신의 컨트롤러를 사용하지만 한 번에 하나씩 2보기를 가질 수있는 요소를 갖고 싶습니다. 미래에 가능한 동작에 따라 내용을 변경해야하는 더 많은 ng-includes를 포함해야하므로 ng-view를 사용하고 routeProvider를 사용할 수 없습니다.

나는 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에는 페이지 스크립트 태그에서 포함을로드 할 때 몇 가지 문제가있었습니다.
• JSBin이 조금 더 좋았습니다.
• 나는 자신의 파일에 템플릿을 발견 할 때까지 예상대로 작동하지 못했습니다.