1

私はこれに似たものを持っています:

<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すればよいですか?

4

2 に答える 2

1

を使用して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>
于 2014-06-18T20:02:01.067 に答える
0

共有する必要があるモデルがある場合は、両方のコントローラーがデータにアクセスして変更を認識できるサービスを使用する必要があります

于 2014-06-18T19:57:27.890 に答える