Nicht in der Lage, Wert in Sicht (Direktive) zu erhalten

Question

Ich habe ein Array in der profile-form.html Direktive. Aber ich bin weder in der Lage, den Wert dieses Array (all_languages) zu erhalten noch iterieren über ng-options in der Direktive. Es wird einfach als String gedruckt. Ich bin neu bei Angular und mache vielleicht alles schrecklich falsch.

Richtlinie

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" 
    }; 
}); 

Richtlinie Vorlage (profil 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

Mit document.ready Ereignis innerhalb einer Winkel Richtlinie macht keinen Sinn, spezifische Methode der Anwendungsbereich nennen . Da document.ready Ereignis nach diesem Ereignis bereits aufgetreten ist, nur angular gestartete Prozessseite.

Um den Code funktionsfähig zu machen, müssen Sie den Code $document.ready(function(){ .... }); entfernen, der dort nicht benötigt wird. Und da document.ready bereits erreicht ist, würde der, den Sie von der Direktive registriert hatten, keinen Anruf erhalten.