Question

我正在使用Angular构建Web应用程序。我们在顶部有一个类似Twitter的导航栏，里面有一个搜索框。然后我们使用ng-repeat指令在下面有一堆条目。我希望能够将搜索框与下面的条目绑定。挑战是由于我们的标题和条目位于两个不同的控制器中。如果他们在同一个控制器中，那么我们可以这样做：

<input type="search" ng-model="search">

<div ng-repeat="entry in entries | filter:search">
  {{ entry.text }}
</div>

但是因为在我的应用程序中，搜索框位于不同的控制器中，search不在范围内，所以它不起作用。

有什么建议吗？

Answer 1

如果将搜索字符串放在服务中，则可以在两个控制器之间共享数据。

这是一个例子。

<!doctype html>
<html ng-app="app">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script>
    angular.module('app', []);

    angular.module('app')
    .controller('Ctrl1', function($scope, ShareData) {
        $scope.myData1 = ShareData;
    });

    angular.module('app')
    .controller('Ctrl2', function($scope, ShareData) {
        $scope.myData2 = ShareData;
        $scope.entries = [
            '1',
            '2',
            '3',
            '11'
        ]
    });

    angular.module('app')
    .service('ShareData', function(){
        return {
            search: "1"
        }
    })

</script>
</head>
<body >
<div ng-controller="Ctrl1">
    <h2>Inside Ctrl 1</h2>
    <input type="text" ng-model="myData1.search">    
</div>
<hr>
<div ng-controller="Ctrl2">
    <h2>Inside Ctrl 2</h2>
    <div ng-repeat="entry in entries | filter:myData2.search">
      {{entry}}
    </div>
</div>
</body>
</html>

Answer 2

您可以在rootscope上使用$ emit并在另一个控制器中捕获它： -

例如： -

<input type="search" ng-model="search">

Controller one:-

$scope.$watch('search',function(new){
$rootScope.$emit('update',new);
});

Controller Second:-

$rootScope.$on('update', function (event, data) {
        $scope.search=data;
      });

其次，你也可以通过服务从控制器共享数据（这个是有效的）

myApp.factory('Data', function () {

    var data = {
        search: ''
    };

    return {
        getSearch: function () {
            return data.search;
        },
        setSearch: function (search) {
            data.search= firstName;
        }
    };
});
 myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('search', function (newValue) {
        if (newValue) Data.setSearch(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getSearch(); }, function (newValue) {
        if (newValue) $scope.search = newValue;
    });
});

将搜索输入绑定到不同控制器中的ng-repeat

2 个答案: