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指令不從服務更新

回答

相關問題