如何使用AngularJS路徑的「解析」來獲取我的$ scope的數據？

我想在我的AngularJS應用程序的路線中使用resolve從我的RESTful API檢索數據並將其設置在我的$scope上。

我已經嘗試了以下無濟於事 - $scope.forms沒有被設置：

angular.module('mycompany.resources').factory('Forms', ['$http', function($http) { 
    var Forms = {}; 

    Forms.all = function() { 
     return $http.get('/api/forms.json') 
    }; 

    return Forms; 
}]); 

angular.module('mycompany.admin.forms', ['mycompany.resources']); 
angular.module('mycompany.admin.forms').config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/forms', { 
      controller: 'formListController', 
      templateUrl: 'forms/formList.html', 
      resolve: { 
       forms: ['Forms', function(Forms) { 
        return Forms.all() 
         .success(function(response) { 
          return response; 
         }) 
         .error(function() { 
          return false; 
         }); 
       }] 
      } 
     }); 
}]); 

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) { 
    'use strict'; 
}]);

和我的模板：

<div ng-controller="formListController"> 
    <ul class="form-list"> 
     <li ng-repeat="form in forms"> 
      <a class="form" href="#/forms/{{form._id}}"> 
       <span class="title">{{form.title}}</span> 
       <span ng-if="form.lastPublished">Last published {{form.lastPublished | date:'M/d/yy'}}</span> 
      </a> 
     </li> 
    </ul> 
</div>

來源

2014-02-28 Chad Johnson

這回Forms.all（）是不夠的，如果有路徑沒有設置 – Whisher

另外，嘗試注入「形式」到你的控制器（小F）並分配$ scope.forms =形式的錯誤。可能想更改名稱以避免含糊不清。 –

我沒有測試了這一點，但最大問題似乎是，你不是注入您的控制器的價值。

所以，只需從您的resolve函數返回Forms.all()函數，因爲它已經返回承諾。然後將值注入您的控制器。另外，請考慮更改名稱以避免歧義。

angular.module('mycompany.resources').factory('Forms', ['$http', function($http) { 
    var Forms = {}; 

    Forms.all = function() { 
     return $http.get('/api/forms.json') 
    }; 

    return Forms; 
}]); 

angular.module('mycompany.admin.forms', ['mycompany.resources']); 
angular.module('mycompany.admin.forms').config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/forms', { 
      controller: 'formListController', 
      templateUrl: 'forms/formList.html', 
      resolve: { 
       forms: ['Forms', function(Forms) { 
        return Forms.all();; 
       }] 
      } 
     }); 
}]); 

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', 'forms', function($scope, Forms, forms) { 
    'use strict'; 
    $scope.forms = forms; 
}]);

從角文檔（http://docs.angularjs.org/api/ngRoute/provider/$routeProvider）：

resolve - {Object.<string, function>=} - 依賴性的可選地圖應當注入到控制器。如果這些依賴關係中的任何一個都是承諾，那麼在控制器實例化之前，路由器將等待它們全部解決或者被拒絕。如果所有承諾都解決成功，則解決承諾的值將被注入，並觸發事件。如果任何承諾被拒絕，則會觸發事件 $routeChangeError事件。地圖對象是：

key - {string}：一個依賴的名稱被注入到所述控制器。

factory - {string|function}：如果是字符串，那麼它是服務的別名。否則，如果函數，則它被注入並且返回的值被視爲依賴項。 如果結果是承諾，那麼在其值被注入到控制器之前解析爲。請注意， ngRoute.$routeParams仍然會參考這些解析函數中的前一個路徑。改用$route.current.params來訪問新路線參數。

來源

2014-02-28 21:09:37

謝謝你！這工作。另外請注意，我需要從我的模板中刪除'ng-controller =「formListController」'。 –

如何使用AngularJS路徑的「解析」來獲取我的$ scope的數據？

回答

相關問題