角js：解决依赖路线

  • Z时代
  • 2024-01-10
  • 分类：问答

我有$ scope.question其中有问题的所有页面。角js：解决依赖路线

我想循环页面明智的问题。为此我写了一个函数questionsCtrl。这个函数我在配置路由时调用。

但在这里我得到了undefined。

请建议如何从$ 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。

回答：

视图的控制器包含视图特定的逻辑。如果您通过template或templateUrl向您的州添加模板，您将有权访问该模板中的控制器范围。就我所了解的问题而言，您希望在显示状态之前向您的内容提供数据。如果你看看在documentation决心财产是你在寻找什么：

您可以使用决心提供的内容或数据控制器是自定义的状态。 resolve是应该注入控制器的依赖关系的可选映射。

但是，您使用不正确。您将无法访问config区块中的$scope。你所要做的就是提供一个功能，你的决心属性，如下所示：

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

正如你可以在上面的代码段看到，我使用的注射一种名为myService的功能。该服务负责获取您的数据。在这个例子中，我假定该服务有一个方法getData，它返回一个承诺。在显示状态之前，ui路由器现在将等待所有承诺解决。一旦你创建了这样的功能，你可以使用你的解析属性的名称（在这种情况下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很难对你的状态进行财产管理。你最终得到一个范围内的汤，这是你明确想要避免的。

以上是 角js：解决依赖路线 的全部内容， 来源链接： utcz.com/qa/264456.html

回到顶部