컨트롤러의 동적 로드 및 ng-include
템플릿을 로드하여 다른 합니다.ng-include사용자가 선택한 조작에 따라 달라집니다.를 들어 하면 '다리 추가' 버튼을 불러옵니다.add_leg.html을 ng-include:
// The Javascript code:
$scope.addLeg = function() {
$scope.sidebar = true;
$scope.sidebar_template = '/partials/legs/add_leg.html';
}
// Simplified example of HTML:
<html>
<div ng-app="MyApp" ng-controller="MainCtrl">
<a ng-click="addLeg()">Add Leg</a>
<a ng-click="addRoute()">Add Route</a>
<a ng-click="editLeg()">Edit Leg</a>
<a ng-click="editRoute()">Edit Route</a>
...
<div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}">
<div ng-include src="sidebar_template"></div>
</div>
<google-map></google-map>
</div>
잘 대로 만, 제1개(</FONT CHANGE:></FONT CHANGE:></FONT CHANGE:></FONT CHANGE:>)만을.MainCtrljs/controllers.js그리고 점점 복잡해지기 시작합니다.앱의 기능이 확장되고 있기 때문에, 여러가지 방법이 있습니다.이 사이드바 기능을 유지하면서 컨트롤러를 여러 컨트롤러로 분할하고 싶습니다.
나는 갖고 싶다.MainCtrl 템플릿의로서(「」를 해 주세요).sidebar_template(좌표에서 교외 이름 가져오기 등) 글로벌 지도 관련 메서드 중 일부를 제어하고 싶다.
이렇게 나누려고 했는데
controllers/js/main.js - MainCtrl
controllers/js/legs.js - LegCtrl
controllers/js/routes.js - RouteCtrl
나는 그 것을 원한다.LegCtrl ★★★★★★★★★★★★★★★★★」RouteCtrl를 잇다MainCtrl「 「 」는 「 」입니다만, 여기서 필요한 에 입니다.그러나 여기서 문제는 필요한 기능에 따라 컨트롤러를 사이드바 div에 동적으로 로드하는 방법입니다. 모든 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.MainCtrl사이드바 div를 둘러싼 래퍼 div에 기재되어 있기 때문에(위의 예에 대해서는 다시 참조) 문제 없습니다.
를 들어 추가''다리 추가'를 .addLegLegCtrlLegCtrl앱에 로딩되지 않아 메서드에 액세스할 수 없습니다.는 가지고 수 있었다addLeg()내 the의 MainCtrl하여 을 하도록 하겠습니다sidebar_template단, 템플릿 는 템플릿이 내부에서 이기 때문입니다.LegCtrl
.ng-include div, 마마이 ??? ?? ???
// MainCtrl
$scope.addLeg = function() {
$scope.required_controller = LegCtrl;
$scope.sidebar = true;
$scope.sidebar_template = '/partials/legs/add_leg.html';
LegCtrl.addLeg();
}
<div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}">
<div ng-include src="sidebar_template" ng-controller="{{required_controller}}"></div>
</div>
할 수 있는 을 볼 수 , 이 경우에는 제가 낸 해결 방법이 합니다.LegCtrl컨트롤러」의 경우).ng-controller전화할 요.addLeg LegCtrl MainCtrl.addLeg해서?) (브로드캐스트) 、 ) 、 ) 、 ))?
누군가 나를 올바른 방향으로 인도해 준다면 좋을 것 같아.글이 너무 많아서 죄송합니다.조용히 설명해야 알 수 있어요말이 되길 바라.감사해요.
업데이트: 서비스를 사용하여 내비게이션 제어 기능을 수행하는 솔루션을 찾은 것 같습니다(관련 템플릿을 로드하고 동적으로 로드되는 새 컨트롤러에 이벤트를 브로드캐스트하여 실행할 기능을 알립니다).
http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview
이 는 이 아이디어를 테스트하고 ..on동작하지 않습니다.템플릿이 로드되기 전에 방송이 시작돼서 그런 것 같아요.떻게하 하칠 ?칠? ????이것이 제가 하고 있는 일에 좋은 해결책인가요?
제가 제대로 이해했다면 템플릿 뷰를 생성하여 새 다리를 만드는 것이 좋습니다.
메인 컨트롤러에서 템플릿을 표시하는 로직을 구현합니다.
$scope.addLeg=function() {
$scope.showAddLeg=true;
}
AddLeg 템플릿뷰에서는 컨트롤러가 로드되므로 실제로 새 레그를 추가하는 메커니즘이 제공됩니다.템플릿은 다음과 같습니다.
<script type="text/ng-template" class="template" id="addLegTemplate">
<div ng-controller='LegsController'>
<!--html for adding a new leg-->
</div>
</script>
이 템플릿은 ng-if + ng-include를 사용하여 기본 html에 포함할 수 있습니다.
<div ng-if='showAddLeg'><div ng-include='addLegTemplate'/></div>
기본적으로 여러 뷰를 생성하여 동일한 컨트롤러에 바인드할 수 있습니다(단, 인스턴스는 다릅니다)., 「」는,LegsController는, 복수의 뷰에 바인드 할 수 있어 완전한 기능을 서포트 기능을 서포트할 수 있습니다.
이 데이터 기반 시나리오가 마음에 듭니다. 템플릿의 행을 조작하기만 하면 됩니다.
$scope.templates = [
{ name: 'include1.html', url: 'partials/include1.html' }
];
$scope.addTemplate = function(name, url) {
$scope.templates.push({ name: name, url: url });
};
마크업:
<div ng-repeat="template in templates" ng-include="template.url"></div>
뷰를 추가하거나 삭제하려면 템플릿 et voila를 수정하기만 하면 됩니다!컨트롤러 코드가 더 필요한 경우 include에 스크립트에 대한 링크를 포함할 수 있습니다.부분 뷰 자체에서 데이터에 바인딩하는 데 문제가 있을 수 있지만 $compile로 해결할 수 있을 것입니다.
당신의 plunkr 데모를 당신이 원하는 대로 할 수 있는 것으로 만들었습니다.http://plnkr.co/edit/whsjBT?p=preview
이것은, 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」) 후에, 어느 되는 .LegCtrl를 통해 됩니다.ng-include이치노
하였습니다.$includeContentLoaded각도가 보고될 때까지 이벤트 브로드캐스트를 지연시키기 위한 이벤트add_leg.html로딩되어 있습니다. 것 같습니다.$broadcast() 번째 는 에서 .첫 번째 파라미터는 에서 사용되는 파라미터와 같아야 합니다.$on()LegCtrl
한 고려해야 할 하는 것입니다.Navigation적절한 경우 컨트롤러 간에 상태를 공유하기 위한 서비스입니다.
언급URL : https://stackoverflow.com/questions/17801988/dynamically-loading-controllers-and-ng-include
'programing' 카테고리의 다른 글
| ESLint 파괴 상태 할당을 사용해야 합니다. (0) | 2023.03.10 |
|---|---|
| Oracle에서 인덱스 사용 강제 (0) | 2023.03.10 |
| WooCommerce 카트, 체크아웃 페이지(메인 테마 부분) 수정 방법 (0) | 2023.03.10 |
| jQuery를 밑줄(_s) WordPress 테마에 추가하는 가장 좋은 방법은 무엇입니까? (0) | 2023.03.10 |
| where 절에서 집계 함수를 사용할 수 없는 이유는 무엇입니까? (0) | 2023.03.10 |