Question

我需要有两个控制器实例。第一个实例必须设置一个变量，第二个实例必须读取它。要设置的变量位于对象vm内（因此不要使用$ scope）。

控制器的代码是：

app.controller("AppController", function(){
    var vm = this;

    vm.search = null;
});

第一个html页面的代码是：

<div class="input-group" ng-controller="AppController as app">
    <input type="text" class="form-control" ng-model="app.search" placeholder="Search...">
</div>

第二个html页面的代码是：

<div class="input-group" ng-controller="AppController as app">
    {{app.search}}
</div>

但在第二页中，app.search的值为null。

Answer 1

我建议使用服务在控制器实例之间传递数据。这answer完美地解释了这一点。

但是，如果您热衷于不使用服务来共享数据，则可以将搜索变量存储在$ rootScope中，这将使其在所有控制器实例和应用程序中的每个其他控制器中都可用。我必须警告你，这不是适当的数据封装。

以下是如何操作：

第一个HTML视图：

<div class="input-group" ng-controller="AppController as app">
<input type="text" class="form-control" ng-model="$root.search" placeholder="Search...">

第二个HTML视图：

<div class="input-group" ng-controller="AppController as app">
    {{$root.search}}
</div>

Answer 2

我创建了这个工厂：

.factory("search", function(){
    var stringaRicerca = null;
    return {
        getStringa: function(){
            return stringaRicerca;
        }, setStringa: function(stringa){
            stringaRicerca = stringa;
        }
    };
})

修改后的控制器是：

app.controller("AppController", function("search"){
    var vm = this;

    vm.string = search.getString;

    vm.set = search.setString;
});

修改的第一页是：

<div class="input-group" ng-controller="AppController as app">
    <input type="text" class="form-control" ng-model="search" placeholder="Search...">
    <button class="btn btn-default" ng-click="app.set(search)" type="button">GO!</button>
</div>

修改的第二页是：

<div class="input-group" ng-controller="AppController as app">
    {{app.string}}
</div>

但在第二页我看到了什么

如何访问两个控制器AngularJS？

2 个答案: