角js：解決依賴路線

Question

我有$ scope.question其中有問題的所有頁面。

我想循環頁面明智的問題。爲此我寫了一個函數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。

Answer 1

視圖的控制器包含視圖特定的邏輯。如果您通過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很難對你的狀態進行財產管理。你最終得到一個範圍內的湯，這是你明確想要避免的。