ビュー（ディレクティブ）で値を取得できません

Question

私はprofile-form.htmlディレクティブのコントローラに配列を持っています。 しかし、私はその配列（all_languages）の値を取得することも、指令の中でng-optionsを使って反復処理することもできません。単に文字列として印刷するだけです。私はAngularを初めて使っていて、恐らくすべてをひどく間違ってやっています。

指令

app.directive("profileForm", function() { 
    return { 
     restrict: "E", 
     templateUrl: "/static/translatorNgApp/profile-form.html", 
     controller: ['$scope','$http',function($scope, $http) { 

      this.getCookie = function(name) { 
       var cookieValue = null; 
       if (document.cookie && document.cookie != '') { 
        var cookies = document.cookie.split(';'); 
        for (var i = 0; i < cookies.length; i++) { 
         var cookie = jQuery.trim(cookies[i]); 
         // Does this cookie string begin with the name we want? 
         if (cookie.substring(0, name.length + 1) == (name + '=')) { 
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
          break; 
         } 
        } 
       } 
       console.log(cookieValue); 
       return cookieValue; 
      }; 

      $scope.csrftoken = this.getCookie('csrftoken'); 

      $scope.myForm={}; 
      $scope.all_languages = ['English', 'Hindi']; 
      $scope.language_pairs = []; 

      $scope.getAllLanguages = function() { 
       $http.get('/getAllLanguages' 
       ).success(function(response) { 
        // success 
        $scope.all_languages.concat(response); 
       }).error(function(response) { 
        // failed 
       }); 
      }; 

      $scope.submitForm = function() { 
       var postData = { 
        method: 'POST', 
        url: '/accounts/tprofile/', 
        // headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}, 
        headers: {'X-CSRF-Token' : $scope.csrftoken }, 
        data: $scope.myForm 
       }; 

       $http(postData) 
        .then(function(response) { 
          // success 
         }, 
         function(response) { // optional 
          // failed 
         }); 
        console.log("Form submitted"); 
       // $scope.message = "Sent Successfully 2"; 
       // console.log(postData); 
       console.log(postData); 
       console.log($scope.myForm); 

      }; 

      $document.ready(function(){ 
       console.log("document ready"); 
       $scope.getAllLanguages(); //This can be commented out for the question's sake. 
      }); 
     }], 
     controllerAs: "profileFormCtrl" 
    }; 
}); 

指令テンプレート（プロファイル-form.html）

  <div class="form-group" > 
       <label for="id_source_language">Source language: </label> 

       <ul> 
        <li> 
         <pre>all_languages = {{all_languages | json}}</pre> 
         <select data-ng-model="source" ng-options="language for language in all_languages" class="form-control" id="id_source_language" name="source_language" placeholder="Source Language" required> 
         </select> 
         <button ng-click="language_pairs.pop($index)" aria-label="Remove">Remove</button> 
         <button ng-click="language_pairs.push({})">Add more pair</button> 
        </li> 

       </ul> 

      </div> 

Answer 1

角度指令内部document.readyイベントを使用すると、範囲の特定のメソッドを呼び出すために意味がありません。 。このイベントの後にdocument.readyイベントが既に発生しているので、角度がプロセスページを開始しました。

理想的には、コードが正常に動作するようにするには、不要なコード$document.ready(function(){ .... });を削除する必要があります。そしてdocument.readyが既に達成されているので、あなたが指示から登録したものは電話を受けません。