angularjs - 解决 Angular UI Router appStates 不提供范围数据的问题

Question

我需要处于“子”状态的数据，而且我正在努力获取它。问题是我希望数据每次都来自 $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 对象，以便我可以填充 View 。

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

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

在这个 Controller 中它正在调用另一个服务:

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 列表填充 View 。换句话说，我必须将一个非常长的对象(上面的类(class))分解成更简单的哈希数组。

现在，这是我想把我的电脑扔出窗外的地方:

我需要一个子(子)状态，我可以在该新哈希中找到一个对象。

     .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 状态的 Controller 中设置停止中断时，它说 getData 未定义并且 chrome 会抛出错误，因为您无法获取 undefined object 的长度。

谁能给点建议。我真的需要这些东西在范围内，因为我想玩这个模型。 如果有人还可以向我推荐一些比 angular ui 网站上更彻底的解决文档，那可能会有所帮助。谢谢!

Answer 1

我最终做的是在我的 curriculumHash 服务中返回一个 promise 。然后将 resolve 放入 appStates.js 中，以便 Controller 在 promise 被解析之前不会启动。

像这样:

.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找到我的答案。如果有人需要更多详细信息，请告诉我，但该引用非常有用。