如何使HTML等待在AngularJS控制器的功能

-1

我有一個mainController.js對象被設置爲默認爲99如何使HTML等待在AngularJS控制器的功能

我獲取用戶的位置和運行做一些其他的功能，用它來計算這個值。

但是，當我加載頁面時，頁面似乎加載比這個過程更快。因此它顯示99而不是計算值。如果我在計算之後放置console.log，則該對象已成功更改。

EDIT1：

status.success(function(data) 
{ 
    $scope.current = data; 
    $scope.$broadcast('back_end_connected'); 
}); 
$scope.getLocation = function() 
{ 
    if (navigator.geolocation) 
    { 
     navigator.geolocation.getCurrentPosition(function (position){ 
      $scope.location = {lat: position.coords.latitude, lng: position.coords.longitude}; 
      $scope.$broadcast('location_obtained'); 
      $scope.buildDist(); 
      $scope.fetch(); 
      //$scope.getRec(); 
     }); 
    } 
    else{ 
     alert("Geolocation is not supported by this browser."); 
    } 
}; 
var dirBuilt = false; 
$scope.$on('location_obtained', function(){ 
     $scope.buildDist = function() 
     { 
      if(dirBuilt === false) 
       { 
        $scope.facilities[0].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[0].location.lat,$scope.facilities[0].location.lng); 
        $scope.facilities[1].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[1].location.lat,$scope.facilities[1].location.lng); 
        $scope.facilities[2].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[2].location.lat,$scope.facilities[2].location.lng); 
        $scope.facilities[3].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[3].location.lat,$scope.facilities[3].location.lng); 
        $scope.facilities[4].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[4].location.lat,$scope.facilities[4].location.lng); 
        $scope.facilities[5].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[5].location.lat,$scope.facilities[5].location.lng); 
        $scope.$broadcast('dist_obtained'); 
        dirBuilt = true; 
        alert("aaa: "+ $scope.facilities[0].distance); 
       } 
     }; 
});

認爲「警報（」 AAA：「+ $ scope.facilities [0] .distance）;」返回我希望它顯示的值，但它不顯示在頁面上...... （ng-bind不會出於某種原因...）

如何使html等待操作？謝謝

來源

2015-11-17 Justin Oh

你不應該讓HTML等待，直到你完成你的Js代碼！你應該做的是顯示一個佔位符值 - 加載圖像，以便用戶知道該頁面正在加載一些數據。

一旦你完成了你的計算，隱藏/替換你想要顯示的數據的加載圖像。

快速例如

您的視圖的標記將有一些HTML元素顯示進度bar.And所有的其他內容將在另一個DIV

<body ng-app="yourApp" ng-controller="yourCtrl as vm"> 
    <div ng-show="loaderCount>0"> Loading something..</div> 
    <div ng-show="loaderCount==0"> 
    <h4>{{userScore}}</h4> 
    </div> 
</body>

而在你的角度控制器，你有一個名爲loaderCount的作用域變量，當你正在做一些操作（http調用/長時間運行函數執行等）時，你將每次增加該變量。當你得到你的結果時，你減少這個變量值。在您的視圖中您將隱藏並基於此值顯示加載窗格。

var yourApp= angular.module('yourApp', []); 
var ctrl = function($scope, $http) { 

    var vm = this; 

    vm.loaderCount = 0; 
    vm.someValue = ""; 
    vm.actionItems = [{ Name: "Test" }, { Name: "Test2" }]; 

    vm.loaderCount++; 

    $http.get("../Home/GetSlowData").then(function(s) { 
     vm.loaderCount--; 
     vm.someValue = s.data; 
    }); 

}; 

yourApp.controller('yourCtrl', ['$scope', '$http', ctrl]);

這可能不是最好的角碼。但是這會給你一個關於如何處理這個用例的想法。您應該使用服務與Http端點交談，而不是直接在角度控制器中使用$http。

請注意，$http.ge t返回promise，它允許您在從異步操作（then事件）獲得響應時執行操作。你應該確保你的時間計算返回一個承諾。

來源

2015-11-17 21:08:32 Shyju

好，如果我有一個像 {PLACEHOLD：「裝載」，值：99} 最初顯示placeHold ,,, 我怎麼知道什麼時候加載並交換值？ –

'value：'loading''並更新後的值與實際值？ –

但是，它仍然會顯示「加載」，即使當它完成加載像現在... –

您可以使用ngBind指令而不是{{}}進行綁定，並且在計算完成時不寫入綁定屬性。這會在視圖結果爲空時隱藏結果。

來源

2015-11-17 21:10:43

我試過了,,,但仍然似乎沒有更新後計算 –

您對服務使用承諾嗎？運行計算的功能可以在一個單獨的角度工廠中，該工廠有成功和錯誤事件可供使用。如果計算成功。您可以將數據傳回您的控制器，然後將該數據綁定到控制器範圍。我很快就會在電腦上添加一些代碼，以便在需要時進一步解釋。

這將是你的距離計算器，我用了一個工廠的業務的，但你可以瞭解爲什麼要使用一個比其他

幾件事情要記住。由於您要求用戶提供地理定位服務，因此您可以將其添加到下面的工廠以擴展工廠功能，並允許您在其他控制器中使用getLocation。

確保您將距離服務添加到您的html文檔中也確保您將距離服務放在您的控制器和主角應用程序中。

distanceService.js

(function(){ 
    'use strict' 
    var distSrvc= angular.module("distanceService",[]) 
    distSrvc.factory('DistanceCalc',['$http',function($http){ 

    return{ 
     getDistance:function(facilitiesData,locationData){ 

      Object.keys(facilitiesData).length; // or if it's already an array of facilities use facilitiesData.length 
      // if its a javascript object and distance is already defined 
      for (var distance in facilitiesData) { 
      if (facilitiesData.hasOwnProperty(distance)) { 
       facilitiesData.distance = distCalc(locationData.lat,locationData.lng,facilitieData.location.lat,facilitieData.location.lng); 
       } 
      } 
      // if its an array of objects 
      for (var i = 0 ; i< facilitiesData.length;i++){ 
       facilitiesData[i].distance = distCalc(locationData.lat,locationData.lng,facilitieData.location.lat,facilitieData.location.lng); 
      } 
     return facilitiesData 
    } 

})();

然後在你的控制器，你需要加載的服務使用。

yourcontroller.js如果您不在html頁面上加載它並將其添加到主角應用程序，則會出現錯誤。

(function(){ 
     'use strict' 
     var myController= angular.module("distanceService",[]) 
     myController.controller('myController',['$scope','DistanceCalc',function($http,DistanceCalc){ // see how i added the service and passed it to the function 
    $scope.getLocation = function(){ 
    if (navigator.geolocation) 
     { 
     navigator.geolocation.getCurrentPosition(function (position){ 
      $scope.location = {lat: position.coords.latitude, lng: position.coords.longitude}; 
      $scope.$broadcast('location_obtained'); 
      $scope.buildDist(); 
      $scope.fetch(); 
      //$scope.getRec(); 
         }); 
        } 
        else{ 
        alert("Geolocation is not supported by this browser."); 
      } 
     }; 

     // this line below sends the data to the service 
     DistanceCalc.getDistance($scope.facilities,$scope.location) 
     .success(function(data){ 
      //success i'm done running distance calculations and now i want to update the facilties object with the added distance 

      $scope.facilities = data 
     }) 
     .error(function(data){ 
     // some error occurred and data can tell you about that error 
     }) 
    } 
})();

來源

2015-11-17 21:20:43 Ravenous

我已經上傳了一些我認爲它是相關的代碼.... Plez幫助當你有時間:) –

@JustinOh請看上面的代碼編輯 – Ravenous

嘗試做這樣的事情：

$scope.value = "Loading"; 
or 
$scope.value = ""; 
$scope.calculate = function() { 
    $scope.value = yourcalculation; 
} 
$scope.calculate();

或者在你的情況，我認爲，如果你使用$範圍$適用（）添加數據後，你的範圍元素會做的伎倆

來源

2015-11-17 21:22:52

試試這個：

$scope.$on('location_obtained', function(){ 
     $scope.buildDist = function() 
     { 
      if(dirBuilt === false) 
       { 
        $scope.facilities[0].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[0].location.lat,$scope.facilities[0].location.lng); 
        $scope.facilities[1].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[1].location.lat,$scope.facilities[1].location.lng); 
        $scope.facilities[2].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[2].location.lat,$scope.facilities[2].location.lng); 
        $scope.facilities[3].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[3].location.lat,$scope.facilities[3].location.lng); 
        $scope.facilities[4].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[4].location.lat,$scope.facilities[4].location.lng); 
        $scope.facilities[5].distance = distCalc($scope.location.lat,$scope.location.lng,$scope.facilities[5].location.lat,$scope.facilities[5].location.lng); 
        $scope.$broadcast('dist_obtained'); 
        dirBuilt = true; 
        alert("aaa: "+ $scope.facilities[0].distance); 
        $scope.$apply(); // This should do the trick 
       } 
     }; 
});

來源

2015-11-17 21:37:50

非常感謝，修復它....這是做什麼？ –

投票並接受我的回答，如果它有幫助 –

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html –

如何使HTML等待在AngularJS控制器的功能

回答

相關問題