#javascript #angularjs #angularjs-model
#javascript #angularjs #angularjs-модель
Вопрос:
У меня есть что-то похожее на это:
<div ng-controller="ControllerA">
<input type="text" id="search_form" value="Search" ng-model="searchModel" />
</div>
<div ng-controller="ControllerB">
<ul>
<li ng-repeat="item in items | filter:searchModel">{{item}}</li>
</ul>
</div>
Но когда я ищу в строке ввода, это не влияет на мой список. Как я могу заставить мою модель с одного контроллера влиять на содержимое другого?
Спасибо.
Редактировать
ControllerA
и ControllerB
полностью изолированы друг от друга, и я хотел бы сохранить это таким образом. Если мне нужно поделиться моделью с другим контроллером, как я $rootScope
могу это сделать?
Комментарии:
1. как вы делитесь
searchModel
между контроллерами?2. Я думаю, это вопрос! Я не понимал, что должен был. Когда у меня была модель и содержимое в одном контроллере, у меня ничего не было в области видимости, поэтому я не понимал, что мне нужно будет делиться этим с контроллерами отдельно. Как бы я настроил его так, чтобы им можно было поделиться?
3. вы можете создать
ControllerA
родительский контроллер иControllerB
дочерний контроллер, а затем изменить переменную на$parent
4. Есть ли какой-нибудь способ, которым я мог бы просто заставить модель реагировать на
$rootScope
? Я хотел бы, чтобы контроллеры были изолированы друг от друга.5. конечно, но загрязнение
$rootScope
не является лучшей практикой, для этого следует использовать сервис или фабрику
Ответ №1:
Вы можете использовать a service
для обмена данными между контроллерами. Используйте заводскую функцию, которую angular должен определить service
.
Вот пример, который я нашел здесь с помощью простого поиска в Google.
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
</script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
</html>
Ответ №2:
если у вас есть модель, которой необходимо поделиться, вы должны использовать сервис, чтобы оба контроллера могли получать доступ к данным и быть в курсе любых изменений