Question

我是Angularjs的新手，我正在尝试构建一个简单的位置查找器小部件。我有一个服务设置，以包含json块中的位置数据。然后我有一个搜索表单的控制器进行http调用以获取json。然后我更新服务中的数据。该服务还用于位置结果控制器，以设置前端指令的数据。我尝试了很多不同的事情，我不确定自己做错了什么。谢谢！

(function() { // start closure wrap

var app = angular.module('store_locator', []);

app.service('$store_location_data', function() {

    var store_location_data = this;

    store_location_data.data = [];

    store_location_data.update_data = function(data) {

        store_location_data.data = data;    

    }
});


app.controller('StoreLocatorFormControllor', [ '$http', '$store_location_data', function($http, $store_location_data) {

    this.search_form = {};

    this.searchLocations = function() {

        $http.get('services/locations/').
          success(function(data, status, headers, config) {

            $store_location_data.update_data(data);

          }).
          error(function(data, status, headers, config) {

            alert('fail');

          });

        this.search_form = {};

    } // end form submit

}]);



app.controller('location_results', [ '$store_location_data', function($store_location_data) {

    this.locations = $store_location_data.data;

}]);



})(); // end closure wrap

HTML：

<form name="storeLocatorForm" ng-controller="StoreLocatorFormControllor as storeLocFormCtrl" ng-submit="storeLocFormCtrl.searchLocations()">
  <p>
    <input ng-model="storeLocFormCtrl.search_form.zip_code" type="text" name="zip_code" value="" />
  </p>
  <p>
    <select ng-model="storeLocFormCtrl.search_form.distance">
      <option value="20">20</option>
      <option value="40">40</option>
      <option value="60">60</option>
    </select>
  </p>
  <p><input type="submit" value="Submit" /></p>  
</form>


<div ng-controller="location_results as results" ng-show="results.locations.length">
  <div ng-repeat="location in results.locations">
    <h1>{{ location.name }}</h1>
  </div>
</div>

Answer 1

您在加载控制器时直接分配服务数据。

你不应该这样做，因为当你从服务分配数据时，ajax调用可能刚刚启动或者可能没有，但是肯定它还没有完成。因此，您的服务数据始终为空。

我建议你使用$broadcast，这对你的情况很有用。

当您获得控制器内的位置数据时，您将在控制器内发生$broadcast事件，并且控制器将使用$on

监听该事件的任何列表

<强> StoreLocatorFormControllor

app.controller('StoreLocatorFormControllor', [ '$http', '$rootScope',  '$store_location_data', function($http, $rootScope, $store_location_data) {

    this.search_form = {};

    this.searchLocations = function() {

        $http.get('services/locations/').
          success(function(data, status, headers, config) {

            $store_location_data.update_data(data);
            $rootScope.$broadcast('locationFetched');
          }).
          error(function(data, status, headers, config) {

            alert('fail');

          });

        this.search_form = {};

    } // end form submit

}]);

<强> location_results

app.controller('location_results', [ '$store_location_data', function($store_location_data) {
    //will call when locationFetched event gets broadcast
    $rootScope.$on('locationFetched', function(event, data){
        this.locations = $store_location_data.data;
    });
}]);

希望这会对你有所帮助。感谢。

Angularjs指令不从服务更新

1 个答案: