角度js：依存関係ルートを解決する

Question

すべてのページについて質問がある$ scope.questionがあります。

私はページワイズの質問をループしたいと思います。このために私は関数questionsCtrlを作成しました。この機能は、経路を設定するときにconfigで呼び出すことになっています。

ここでは定義されていません。

$ 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は、コントローラに注入されるべき依存関係のオプションのマップです。

ただし、誤って使用しています。 configブロックには$scopeへのアクセス権がありません。あなたは上記のコードで見ることができるように、私はサービスがmyServiceと呼ばれる注入機能を使用しています

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

：何がしなければならないことは、次のようにあなたのresolveプロパティに関数を提供しています。このサービスは、データを取得する責任があります。この例では、サービスに約束を返すメソッドgetDataがあると仮定します。 ui-routerは、すべての約束が解決されるのを待ってから、状態を表示します。このような関数を作成したら、resolveプロパティの名前（この場合はpageQuestion）を使用して、View Controllerにデータを注入できます。だからあなたの質問のコントローラは、次のようになります。

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> 

を、あなたの状態の設定でcontrollerAsプロパティから来ている、vm経由でデータにアクセスします。私はまた、あなたの状態のためのテンプレートを使用してng-controllerの発生を削除することをお勧め。既に状態のために宣言されたView Controllerがあるので、これは必要ありません。また、ng-controllerは、あなたの状態を管理しにくいものにしています。あなたはスコープスープで終わります。これはあなたが決して避けたいものです。