Angularjs指令不从服务更新

我是Angularjs的新手，我正在尝试构建一个简单的位置查找工具。我有一个服务设置为包含json块中的位置数据。然后我有一个搜索表单的控制器，它使http调用来获取json。然后我更新服务中的数据。该服务还用于位置结果控制器以设置前端指令的数据。我试过了一堆不同的东西，我不确定我做错了什么。谢谢！Angularjs指令不从服务更新

(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>

来源

2015-02-07 dsketch21

究竟是什么问题？什么部分不起作用？ – ribsies 2015-02-07 20:07:42

您直接在负荷控制器的时间分配服务数据。

你不应该这样做，因为当你从服务中分配数据时，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; 
    }); 
}]);

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

来源

2015-02-07 20:55:57

@ dsketch21对你有帮助吗？ – 2015-06-26 17:37:27

Angularjs指令不从服务更新

回答

相关问题