변수가 작동하지 않음을 바인딩합니다.

Question

사용자 지정 지시문을 만들었으므로 간단한 변수 바인딩을 수행하려고합니다. 데이터를 직접 설정하면 모든 것이 올바르게 표시되지만 쿼리를 사용할 때 데이터가 설정되지 않은 경우 콘솔 출력에 변수가 할당 되었음이 표시됩니다.

이

내 지시어입니다 :

function tutorialCourse(){ 
return{ 
    restrict: 'E', 
    templateUrl: 'app/tutorial/tutorialCourse.html', 
    controller: 'TutorialCourseController', 
    controllerAs: 'tutorial' 
}; 
}; 

이 내 컨트롤러 :

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h4 class="panel-title">{{tutorial.course.title}} </h4> 
    </div> 
</div> 

이미의 값을 반환하려고 :

TutorialCourseController.$inject = ['$q', 'Course']; 

function TutorialCourseController($q, Course){ 

    this.course = {}; 

    loadTutorial(); 

    function loadTutorial(){ 
     Course.query().$promise.then(function(courses){ 
      this.course = _.first(courses); 
      console.log(this.course) 

     }); 
    }; 

} 

내 HTML은 정말 간단합니다 laodTutorial을 사용하고 함수 호출을 사용하여 코스 변수에 직접 할당하지만 작동하지 않습니다. 하지만 이렇게하면

this.course = {id: 11, title: "Tutorial"} 

모두 정상적으로 작동합니다. 어떤 생각을 이해하지 못했거나 잘못하고있는 것입니까?

Answer 1

문제는 this.course입니다. 쿼리 콜백 함수를 사용하면 함수 외부의 this (컨텍스트)이 아닙니다. 각 자바 스크립트 함수는 인스턴스화/실행될 때 자체 컨텍스트를 가지고 있기 때문입니다.

var self = this;에 컨트롤러 컨텍스트를 저장하고 TutorialCourseController 컨텍스트를 가리키는 동안 self을 사용하여이 문제를 해결할 수 있습니다. 렉시 컬 범위 지정을 통해 Javascript는 self 변수의 값을 분석합니다.

TutorialCourseController.$inject = ['$q', 'Course']; 

function TutorialCourseController($q, Course){ 
    var self = this; 
    self.course = {}; 

    loadTutorial(); 

    function loadTutorial(){ 
     Course.query().$promise.then(function(courses){ 
      self.course = _.first(courses); 
      console.log(this.course); 
     }); 
    }; 
} 

John Papa styleguide