AngularJS에 있는 다른 앱 안에서 ng-app을 사용할 수 있습니까?
나는 두개의 ng-app을 가지고 있습니다;
<div ng-app="app1" >
somexpression
<div ng-app="app2">
some more expression
</div>
</div>
그것을 작동시킬 수 있는 방법이 있습니까?중첩 ng-app을 만들 때 작동하지 않습니다.
두 개의 다른 컨트롤러를 사용할 수 있다는 것을 알고 있지만 두 개의 컨트롤러를 사용하고 싶지 않습니다. ----EDIT ------------------------------------------------------------------
중요한 것은;
angular.module('AppName', [
'angular-carousel'
])
그래서 어떻게든 이 ng-app을 지시로 바꿀 필요가 있습니다.
프롬 더 앵글JS문서, 정답은 아니오 입니다.
http://docs.angularjs.org/api/ng/directive/ngApp
AngularJS 응용프로그램은 서로 중첩될 수 없습니다.
중첩되지 않았다면 괜찮습니다. 누군가가 이미 이 질문을 했습니다. 여기를 참조하십시오.각진JS 한 페이지 내의 다중 ng-app 및 AnguarJS문서
http://docs.angularjs.org/api/ng/directive/ngApp
온리 원 앵글JS 애플리케이션은 HTML 문서별로 자동 부팅이 가능합니다.문서에 있는 첫 번째 ngApp은 자동 부트스트랩에 대한 루트 요소를 응용 프로그램으로 정의하는 데 사용됩니다.HTML 문서에서 여러 응용프로그램을 실행하려면 각도를 사용하여 수동으로 부트스트랩해야 합니다.부트스트랩 대신에.
저는 이 문제에 대해 까다로운 해결책을 하나 찾았습니다.이 개념은 "호스트" 애플리케이션이 어떻게든 중첩된 애플리케이션의 루트 요소를 뛰어넘어야 한다는 것입니다.지시문을 사용했습니다.
angular.module("ng").directive("ngIsolateApp", function() {
return {
"scope" : {},
"restrict" : "AEC",
"compile" : function(element, attrs) {
// removing body
var html = element.html();
element.html('');
return function(scope, element) {
// destroy scope
scope.$destroy();
// async
setTimeout(function() {
// prepare root element for new app
var newRoot = document.createElement("div");
newRoot.innerHTML = html;
// bootstrap module
angular.bootstrap(newRoot, [attrs["ngIsolateApp"]]);
// add it to page
element.append(newRoot);
});
}
}
}
});
간단한 앱 예시:
// module definition
angular.module("testMod1",[])
.service("moduleService", function ModuleService() {
this.counter = 0;
this.getCounter = function() {
return this.counter;
};
this.incCounter = function() {
this.counter += 1;
}
})
.controller("ModuleCtrl", function(moduleService) {
this.getValue = function() {
return moduleService.getCounter();
};
this.incValue = function() {
moduleService.incCounter();
};
});
이제 마크업에서는 ng-isolate-app을 사용할 수 있습니다.
<!-- App instance 1 -->
<body ng-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
<!-- App instance 2 -->
<div ng-isolate-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
<!-- App instance 3 -->
<div ng-isolate-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
</div>
</div>
</div>
</div>
</div>
</body>
이것은 간단한 경우에 작동하지만 복잡한 응용 프로그램에서 어떻게 작동할지 모르겠습니다.
angularjs에서는 ng앱을 다른 앱 안에서 사용할 수 없습니다.왜냐하면 각JS 응용프로그램은 서로 중첩될 수 없습니다.
https://docs.angularjs.org/api/ng/directive/ngApp
언급URL : https://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs
'programing' 카테고리의 다른 글
| 상태가 변경될 때 명명된 보기에서 다시 로드를 방지하려면 어떻게 해야 합니까?각진JS UI-라우터 (0) | 2023.09.24 |
|---|---|
| jQuery에서 브라우저 스크롤 위치를 얻으려면 어떻게 해야 합니까? (0) | 2023.09.24 |
| MariaDB 슬레이브 오류 - 문자열이 MASTER_HOST에 비해 너무 깁니다. (0) | 2023.09.24 |
| 휴리스틱 참가자의 주기적인 복구를 절대로 종료하지 않음 (0) | 2023.09.24 |
| 5.5.52-MariaDB 대 5.6.15 mysql 트리거가 작동하지 않음 (0) | 2023.09.24 |