Question

我有$ scope.question，它对所有页面都有疑问。

我想循环阅读页面问题。为此我写了一个函数questionsCtrl。我在设置路由时在配置中调用此函数。

但在这里我得到了不确定。

请建议如何从$ scope.questions获取页面数据 app.js

 (function () {
    "use strict";
    var app = angular.module("autoQuote",["ui.router","ngResource"]);

    app.config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider){
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("step1", {
              url : "",
              controller: "questionsCtrl",
            resolve: {
                pageQuestion: $scope.questions
            }
            })  
            .state("step2", {
              url : "/step2",
              controller: "questionsCtrl",
            })
    }]
    );
}());

questionCtrl.js

(function () {
    "use strict";

    angular
    .module("autoQuote")
    .controller("questionsCtrl",["$scope","$state","$q",questionsCtrl]);

    function questionsCtrl($scope,$state,$q) {
       console.log('here in get question for page: '+$state.current.name);
        //var deferred = $q.defer();
        if($state.current.name == "" || $state.current.name == "step1")
            {
                $scope.pageQuestion = $scope.RC1_Cars_v2;
            }
        else if($state.current.name == "step2")
            {
                $scope.pageQuestion = $scope.RC1_Drivers_v2;
            }
        //return deferred.promise;
        console.log($scope);
    }
}());

HTML

    <div class="container-fluid col-md-8">
    <div ng-controller="autoQuoteCtrl">

       <div ng-repeat="que in pageQuestion">
           <!-- pagequestion will be in loop here -->
       </div>


      </div>
    </div>

这是我的plunker http://plnkr.co/edit/kLc6DPqzQgLNpUBaLtZi?p=preview以获取完整的代码。

Answer 1

视图的控制器包含视图特定的逻辑。如果您通过template或templateUrl向您的州添加模板，则可以访问该模板中的控制器范围。据我了解您的问题，您希望在显示状态之前为您的内容提供数据。如果您查看documentation，则解析属性正是您要查找的内容：

您可以使用resolve为控制器提供自定义状态的内容或数据。 resolve是一个可选的依赖关系图，应该注入控制器。

但是，您使用不当。您无法访问$scope块中的config。您需要做的是为您的resolve属性提供一个函数，如下所示：

resolve: {
  pageQuestion: function(myService) {
    return myService.getData();
  }
}

正如您在上面的代码片段中所看到的，我正在使用一个注入名为myService的服务的函数。该服务负责获取您的数据。在示例中，我假设该服务具有返回promise的方法getData。 ui-router现在将等待所有承诺在显示状态之前得到解决。创建此类函数后，可以使用resolve属性的名称（在本例中为pageQuestion）将数据注入视图控制器。所以你的问题控制器看起来像这样：

function questionsCtrl(pageQuestion) {
  this.pageQuestion = pageQuestion;
}

您只需将您的决心注入控制器并将其分配给视图变量即可。

请注意，我假设您的状态为controllerAs语法，因此我可以省略$scope并直接在控制器中使用this。您所要做的就是在状态配置中添加属性controllerAs，如下所示：

.state("step1", {
  ...
  controller: "questionsCtrl",
  controllerAs: 'vm'         
})

这样做的好处是，从长远来看，您不会遇到范围问题（这与范围继承有关）。 This是关于范围的精彩文章。

您的观点现在应该如下所示：

<div class="container-fluid col-md-8">
  <div ng-repeat="que in vm.pageQuestion">
    <!-- pagequestion will be in loop here -->
  </div>
</div>

您可以通过vm访问您的数据，该controllerAs来自州配置中的ng-controller属性。我还建议您使用模板作为州，并删除ng-controller的出现次数。你不会需要这个，因为你已经为你的州宣布了一个视图控制器。此外，username会使您很难对您的州进行财产管理。你最终得到了一个范围汤，这是你绝对想要避免的。

Angular js：解析依赖路由

1 个答案: