Question

我似乎已经有了这类问题的其他主题，但没有人可以帮助我...所以这是我的问题：

我有一个带有搜索按钮的导航栏，这个按钮从Web服务获取并获取请求，并返回一个必须应用于填充表列表的json对象。问题是，我的按钮和我的表位于独立的控制器中，它确实像我预期的那样工作。

var app = angular.module('clientRest', []).controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
    $scope.contatos = loadLista.getContatos();
}]).controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
    $scope.listar = function() {
        $http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
            loadLista.setContatos(response);
        });
    };
}]).service('loadLista', function() {
    var contatos = [];
    return {
        getContatos: function() {
            return contatos;
        },
        setContatos: function(c) {
            contatos = c;
        }
    };
});

我的代码...... 当我从pesquisa控制器调用listar()时，我需要将接收到的数据从lista控制器发送到$ scope.contatos以使我的ng-repeat工作，只需单击一下即可。

我该怎么做？

谢谢大家

Answer 1

最好使用服务在两个控制器/模块之间共享数据，因为这可能是最好的方法。您可以参考下面给出的代码段来理解这个概念。

angular.module('app.A', [])
.service('ServiceA', function() {
    this.getValue = function() {
        return this.myValue;
    };

    this.setValue = function(newValue) {
        this.myValue = newValue;
    }
});

angular.module('app.B', ['app.A'])
.service('ServiceB', function(ServiceA) {
    this.getValue = function() {
        return ServiceA.getValue();
    };

    this.setValue = function() {
        ServiceA.setValue('New value');
    }
});

要触发数据接收事件，您可以使用

使用@broadcast / @emit
带回电的角度承诺
控制器启动功能，用于重新加载先前从服务中读取的信息

.controller('MyController', function($scope, ServiceA) { $scope.init = function() { $scope.myValue = ServiceA.getValue(); }; // Call the function to initialize during Controller instantiation $scope.init(); });

Answer 2

使用$ rootScope。$ emit在设置变量时发出更改事件，并使用$ on获取lista控制器中的值。我在这里使用customListAr来演示按钮点击。这有帮助吗？

var app = angular.module('clientRest', [])
  .controller('lista', ['$scope', 'loadLista', '$rootScope',
    function($scope, loadLista, $rootScope) {
      console.log(loadLista);
      $scope.contatos = loadLista.getContatos();
      $rootScope.$on('change', function() {
        $scope.contatos = loadLista.getContatos();

      });
    }
  ])
  .controller('pesquisa', ['$scope', '$http', 'loadLista',
    function($scope, $http, loadLista) {
      $scope.listar = function() {
        $http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
          loadLista.setContatos(response);
        });

      };

      $scope.customListAr = function() {
        loadLista.setContatos(["item 1" , "item 2", "item 3"]);
      }
    }
  ])
  .service('loadLista', ['$rootScope',
    function($rootScope) {
      var contatos = [];
      return {
        getContatos: function() {
          return contatos;
        },
        setContatos: function(c) {
          contatos = c;
          $rootScope.$emit('change');
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="clientRest">
  <div ng-controller="lista">
    <ul>
      <li ng-repeat="a in contatos">{{a}}</li>
    </ul>
  </div>
  <div ng-controller="pesquisa">
    <button ng-click="customListAr()">Click Me</button>
  </div>
</div>

Answer 3

你的问题是当你做$ scope.contatos = loadLista.getContatos（）;您正在设置静态值，而angular无法有效地为该对象创建观察程序，因为您的setContatos方法每次都在创建一个新对象。要解决这个问题，让控制器的作用域保存对父对象的引用，然后它将自动在该对象上有一个观察者。

var app = angular.module('clientRest', [])
    .controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
        $scope.contatos = loadLista.contatos;
    }])
    .controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
        $scope.listar = function() {
            $http.get("http://localhost/wsRest/index.php/contato"
            ).success(function (response) {
                loadLista.contatos.data = response;
            });
        };
    }])
    .service('loadLista', function() {
        var lista = {
            contatos: {},
        };
        return lista;
    });

// view:

<ul>
  <li ng-repeat="contato in contatos.data">
    {{ contato }}
  </li>
</ul>

调用函数或将数据传递给另一个控制器AngularJS

3 个答案: