여러 Angular를 적용할 수 있습니까?동일 요소상의 JS 컨트롤러
여러 Angular를 적용할 수 있습니까?동일한 요소에 JS 컨트롤러가 있습니까?
아니요, 같은 요소에 2개의 컨트롤러를 적용할 수 없지만 여러 디렉티브를 적용할 수 있습니다.또한 디렉티브에는 컨트롤러가 있을 수 있습니다.
app.directive('myDirective1', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
app.directive('myDirective2', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
HTML에서 다음을 수행합니다.
<div myDirective1 myDirective2></div>
또한 다음 코멘트에서 설명한 바와 같이 2개의 컨트롤러가 같은 범위를 공유할 수 있습니다.이것은 바람직한 결과입니다.2개의 컨트롤러 중 하나는 새로운 범위를 요구할 수 있지만 2개의 새로운 범위를 설정할 수는 없습니다.
2개의 디렉티브에서2개의 분리된 스코프를 허용하지 않는 이유는 스코프 변수가 2개의 분리된 디렉티브컨트롤러에서 같은 이름을 가진 경우 뷰는 스코프 값을 어디서 얻을지 모르기 때문입니다.
다음은 흥미로운 읽을거리입니다.여러 디렉티브가 같은 요소에 대해 격리된 범위를 요구할 수 없는 이유는 무엇입니까?
컨트롤러를 확장하여 원하는 장소에서 사용할 수 있습니다.더 나은 예는 Fidle을 참조하십시오.
<script>
var multiApp = angular.module('new', []);
multiApp.controller('aCtrl', ['$scope', '$controller', function ($scope, $controller) {
$scope.text1 = 'Hello';
angular.extend(this, $controller('bCtrl', {$scope: $scope}));
}]);
multiApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.text2 = 'World!';
}]);
</script>
html을 사용하는 경우:
<body ng-app="new">
<div id="container1" ng-controller="aCtrl">
{{text1}} {{text2}}
</div>
</body>
바이올린 : http://jsfiddle.net/kkelly/thk9n20o/ # base.com
아니요.
HTML은 XML 형식이며, 동일한 요소에 고유하지 않은 속성을 여러 개 갖는 것은 유효하지 않습니다.바꿔 말하면
<div ng-controller="a" ng-controller="b">
무효입니다.하지만 우리가 할 때는요?
<div id="a" ng-controller="a">
<div id="b" ng-controller="b">
<div id="c">
이것은 유효한 xml/HTML이지만 2개의 컨트롤러를divid로c이것을 네스트 컨트롤러라고 부릅니다.
탭을 컨테이너로 코드화하려다 같은 문제가 발생했습니다.지시를 사용하려고 합니다.이 명령어를 사용하여 콘텐츠를 랩합니다.ng-transclude- 이렇게 하면 콘텐츠용 컨트롤러가 1개뿐이고, 그 후 디렉티브에 다른 컨트롤러를 정의하여 필요한 콘텐츠와 함께 여러 번 재사용할 수 있습니다.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="LukApp1">
<div ng-controller="LukCon1">
<textarea ng-model="text1" cols="40" rows="10"></textarea>
<textarea ng-model="text2" cols="40" rows="10"></textarea>
</div>
<div ng-controller="LukCon2">
<textarea ng-model="text3" cols="40" rows="10"></textarea>
<textarea ng-model="text4" cols="40" rows="10"></textarea>
</div>
</div>
<script>
var app = angular.module("LukApp1", []);
app.controller("LukCon1", function($scope) {
$scope.text1 = "First Controller TEXT1";
$scope.text2 = "First Controller TEXT2";
});
app.controller("LukCon2", function($scope) {
$scope.text3 = "Second Controller TEXT3";
$scope.text4 = "Second Controller TEXT4";
});
</script>
</body>
</html>이건 분명 효과가 있을 거야
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<div id="div1" ng-controller="anotherController">
Message: {{message}} <br />
<div id="div2" ng-controller="myController">
Message: {{message}}
</div>
</div>
<div id="div3" ng-controller="myController">
Message: {{message}}
</div>
<div id="div4" ng-controller="anotherController">
Message: {{message}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "This is myController";
});
ngApp.controller('anotherController', function ($scope) {
$scope.message = "This is anotherController";
});
</script>
</body>
</html>
언급URL : https://stackoverflow.com/questions/28638823/is-it-possible-to-apply-multiple-angularjs-controllers-on-the-same-element
'programing' 카테고리의 다른 글
| Wordpress에서 Wordpress 하위 테마 경로 가져오기 (0) | 2023.03.08 |
|---|---|
| Angular JS에서 파일 입력을 지우는 방법 (0) | 2023.03.08 |
| Create react 앱에서 소스 맵을 생성하는 방법 (0) | 2023.03.08 |
| Wordpress 플러그인 설치 - FTP 서버에 연결하지 못했습니다 - 가장 안전한 솔루션? (0) | 2023.03.08 |
| 처리에서 보류로 주문이 작성될 때 WooCommerce 주문 상태 설정 (0) | 2023.03.08 |