Блог

Главная - Вопросы по программированию - Фильтрация содержимого одного контроллера с помощью модели в другом (AngularJS)

Фильтрация содержимого одного контроллера с помощью модели в другом (AngularJS)

#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:

если у вас есть модель, которой необходимо поделиться, вы должны использовать сервис, чтобы оба контроллера могли получать доступ к данным и быть в курсе любых изменений