Angularjs初始化服務

我的工作AngularJs項目，該項目有頂級導航項目使用服務呼叫Angularjs初始化服務

App.service('Menu', function($http){ 
    return { 
     get:function(callback){ 
      $http.get('api/menu.json').success(function(menuData){ 
       callback(menuData); 
      }); 
     } 
    } 
});

我使用的是相同的，我BaseController從服務器加載下面

App.controller('BaseCtrl', function($scope, Menu){ 
    $scope.menuData = {}; 
    Menu.get(function(menuData){ 
     $scope.menuData = menuData; 
    }); 
});

如前所述

我的菜單看起來一片空白一段時間，直到服務調用成功並將值分配給$scope.menuData有沒有什麼辦法在渲染視圖之前獲取相同的值。

請讓我知道，我可能已經嘗試了所有可能的方式來做到這一點，但沒有奏效:(

PS：我使用AngularJS v1.2.9

來源

2014-04-21 Ashok Vishwakarma

看看'ng-cloak' –

@MohammadSepahvand我已經通過了ng-cloak的文檔，但不明白它是如何工作的以及我的觀點中的哪一部分我必須應用相同的，請問您可以請解釋一下。謝謝 –

'ng-cloak'基本上不會在視圖中顯示綁定表達式，直到綁定實際設置完成，我認爲這是您最初的問題，它是一種比防止呈現控制器/視圖更好的方法，因爲在某種程度上，後者殺死了幾乎直接轉換路線並具有非常流暢性質的SPA。 –

返回從服務承諾，並用它在你的控制器的決心：

app.service('Menu', function($http) { 
    var menuData = null; 

    var promise = $http.get('api/menu.json').success(function (data) { 
     menuData = data; 
    }); 

    return{ 
      getMenuPromise: promise, 
      getMenuData:function(){ 
      return menuData; 
      } 
    }; 
});

，並在你的路由定義：現在

$routeProvider 
    .when('/home',{controller:'BaseCtrl', 
    templateUrl:'../homeTpl.html', 
    resolve:{ 
     'menuData':function(Menu){ 
     return Menu.getMenuPromise; 
    } 
    }})

時BaseCtrl被實例化的數據有：

app.controller('BaseCtrl', function($scope,Menu) { 
    $scope.menuData = MyService.getMenuData(); 
});

來源

2014-04-21 15:20:37

問題是我的BaseCtrl沒有分配給任何特定的視圖，它是所有視圖的通用控制器。請建議一種方法來解決控制器中的數據不在路由器中。謝謝 –

，以確保數據的最佳方式可用前呈現視圖是使用resolve財產的路線上。

如果它返回一個承諾，這將解決實際渲染視圖之前的承諾。

.when('/blah', { 
    templateUrl: '/path/to/view.html', 
    controller: 'myController', 
    resolve: { 
     menuItems: function($http){ 
     return $http.get('api/menu.json'); 
     } 
    } 
});

該值將被傳遞到你的控制器作爲依賴性：

angular.controller('myController', function(menuItems){ 
    $scope.menuData = menuItems; 
});

來源

2014-04-21 15:19:46 Josh

問題是我的BaseCtrl沒有分配給任何特定的視圖，它是所有視圖的通用控制器。請建議一種方法來解決控制器中的數據不在路由器中。謝謝 –

@AshokVishwakarma - 你無法完成你想要的東西。你可以創建一個承諾來解決你的控制內的事情，並調用'init（）'或類似的東西，但是你不能阻止視圖加載而不使用路由。在你的控制器裏你可以做的最好的事情是創建一些'ready'標誌，當所有內容都被加載時，它會被翻轉，當它準備好時只是簡單地'隱藏'或'顯示'你的內容。 – Josh

Angularjs初始化服務

回答

相關問題