解决Angular UI路由器appStates不提供范围数据

时间:2013-06-23 14:47:56

标签: angularjs promise angular-ui

我需要处于“子”状态的数据,而我正试图将它拉出来。问题是我希望数据每次都来自$ rootScope。

所以这里 - 我的问题大纲。

我正在使用州提供商。所以这是我的第一个州:

    .state('dashboard.create', {
        // parent: 'dashboard',
        url: '/create',
        views: {
          '': {
            templateUrl: "/app/partials/create.html",
            controller: "CreateCtrl",
          }
        }
      })

在CreateCtrl中我所做的只是调用此dashboardAPI.lessons();

services.factory('dashboardAPI', ['$rootScope', '$q', '$http', function(rootScope, $q, $http) {

  function load(path) {
    return $http.get("/app/data" + path);
  }

  return {
    lessons: function() {
      var deferred = $q.defer();

      if (rootScope.lessons == undefined) {
        load("/getLessons.json").success(function (data) {
          rootScope.lessons = data.result;
          deferred.resolve(data.result);
        }).
        error( function() {
          console.log("Problem getting lessons");
        });
      }
      else
        deferred.resolve(rootScope.lessons);
      return deferred.promise;
    }
  };

}]);

这可以填充rootScope.lessons对象,以便我可以填充视图。

然后,有一个像这样的子状态:

    .state('dashboard.create.lessons', {
        // parent: 'create',
        url: '/lessons',
        views: {
          'curriculum': {
            templateUrl: "/app/partials/create.lessons.html",
            controller: ['curriculumHash', function(curriculumHash){
              curriculumHash.sstHash();
            }],
          },
        }
      })

在这个控制器中,它正在调用另一个服务:

services.factory('curriculumHash', ['$rootScope', '$q', 'dashboardAPI', function(rootScope, $q, dashboardAPI) {

  return {
    sstHash: function() {
      var deferred = $q.defer();

      if (rootScope.sstopicsArray == undefined) {
        //Get a promise back from API call
        dashboardAPI.lessons().then(function(data) {
          rootScope.sstopicsArray = [];
          var x = data.Topics;
          for (var i=0; i<x.length; i++) {
            var y = x[i].Subtopics;
            for (var j=0; j<y.length; j++) {
              var z = y[j].Subsubtopics;
              for (var k=0; k<z.length; k++) {
                rootScope.sstopicsArray.push({
                  Id: z[k].Id,
                  Name: z[k].Name,
                  Description: z[k].Description,
                  List: z[k].Lessons
                });
              }
            }
          }
          return deferred.resolve();
        });
      }
      else
        return deferred.resolve();
    }
  };
}]);

这也有效。在填充数组时,我可以使用它来使用一些可排序的jquery列表填充视图。换句话说,我必须采用一个非常冗长的对象(上面的课程)并将其分解为更简单的哈希数组。

现在,我想把电脑扔到窗外:

我还需要一个子(子)状态,在那里我可以在新的哈希中找到一个对象。

     .state('dashboard.create.lessons.detail', {
        // parent: 'lessons',
        url: '/{lessonId}',
        views: {
          'detail@dashboard.create': {
            templateUrl: "/app/partials/create.detail.html",
            resolve: {
              getData: "curriculumHash"
            },
            controller: ['$scope', '$stateParams', 'getData', function(scope, stateParams, getData){
                getData.sstHash().then(function() {

                  for (var i=0; i<scope.sstopicsArray.length; i++) {
                    var b = a[i];
                    for (var j=0; j<b.length; j++) {
                      if (b[j].Id == stateParams.lessonId)
                        scope.activeItem = b[j];
                    };
                  }
                });
              })
            }],
          }
        }
      })

我已经搜索了高低,以获得如何使用resolve的一个体面的例子。无论如何,当我在dashboard.create.lessons.detail状态的控制器中设置一个停止时,它表示getData是未定义的,并且chrome会抛出错误,因为你无法获得未定义对象的长度。

任何人都可以提出建议。我真的需要这些东西在范围内因为我想玩模型。 如果有人也可以向我推荐一些比在角度ui网站上更彻底的解决方案文档,那可能会有所帮助。谢谢!

1 个答案:

答案 0 :(得分:3)

我最终做的是在我的课程哈希服务中返回一个承诺。然后将解决方案放入appStates.js,以便控制器无法启动,直到承诺得到解决。

像这样:

.state('dashboard.create', {
    // parent: 'dashboard',
    url: '/create',
    views: {
      '': {
        templateUrl: "/app/partials/create.html",
        resolve:{
          'curriculumHashPromise':function(curriculumHash){
            return curriculumHash.promise;
          }
        },
        controller: ['$rootScope', function(rootScope){
          //I will have access to all curriculumHash methods as well as dashBoard 
        }],
      }
    },

我提到这个question here来找到答案。让我知道是否有人需要更多细节,但参考非常有用。