Можно ли применять несколько контроллеров AngularJS на одном и том же элементе?
Можно ли применять несколько контроллеров AngularJS на одном и том же элементе
Ответ 1
Нет, вы не можете применять два контроллера к одному элементу, но вы можете применять несколько директив. И директивы могут иметь контроллеры.
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>
И, как упоминалось в комментариях ниже, два контроллера могут использовать один и тот же объем, что часто является желаемым эффектом; один из двух контроллеров может запросить новую область, но у вас не может быть двух новых областей;
причина не допускать двух изолированных областей в двух директивах заключается в том, что представление не будет знать, откуда получить значения области видимости, если переменная scope имеет одно и то же имя в двух изолированных контрольных контроллерах
Вот интересное сообщение: Почему несколько директив не могут запросить изолированную область в одном элементе?
Ответ 2
Вы можете расширить контроллер и использовать его везде, где хотите. См. "Скрипт" для лучшего примера.
<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 like:
<body ng-app="new">
<div id="container1" ng-controller="aCtrl">
{{text1}} {{text2}}
</div>
</body>
Ответ 3
Нет
HTML - это форма XML, и недопустимо, чтобы 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, но он не назначает два контроллера для div
с id c
. Это называется вложенными контроллерами.
Ответ 4
Я только что столкнулся с той же проблемой, пытаясь закодировать вкладки с контейнером, и я собираюсь использовать директиву, которая обертывает содержимое с помощью ng-transclude
- таким образом, это будет всего лишь один контроллер для контента и я тогда определю еще один контроллер в директиве, который можно повторно использовать несколько раз с любым необходимым контентом.
Ответ 5
<!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>
Ответ 6
это наверняка сработает...
<!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>