각도 데이터 바인딩이 뷰에서 업데이트되지 않는 이유는 무엇입니까?

Question

나는 기본적인 자바 스크립트 레이서 프로그램을 만들고 있는데 각도를 사용하여보기에서 점수를 업데이트하려고합니다. 필자는 플레이어를 이동시키고 다른 게임 상태를 갖는 기본 코드를 작성했습니다.

당신은 내가 여기에 내 코드를 설정하는 방법을 볼 수는 바이올린에 표시되지 않는 몇 가지 이유를 들어

http://jsfiddle.net/ey8dk22r/1/

을하지만, 내 말에 각 코드가 "0"이 표시됩니다 각 점수. $ scope.score_one 또는 2를 "hello"와 같은 것으로 변경하면 "hello"라는 단어가 대신 나타납니다. 현재 {{score_one}} 및 {{score_two}}이 (가) player1.score 및 player2.score로 설정되어 있습니다. 번호가 처음 설정되면 무엇이 나타나는지 (0) 표시됩니다. 플레이어가 이기고 플레이어의 점수가 성공적으로 업데이트되면보기의 점수가 업데이트되지 않습니다.

여기 내 js 파일의 일부입니다. 플레이어 객체와 scoreController : 내가 어디 여기

function Player(element_id, name){ 
    this.el = $(element_id).selector; 
    this.position = 1; 
    this.name = name; 
    this.score = 0; 
    this.check = function(){ 
    if ($(this.el + ' td:last-child').hasClass("active")){ 
     this.score += 1; 
     $(".winner").html("<h2>" + this.name + " wins!</h2>") 
     game = false; 
     $(".reset").show(); 
    } 
    } 
    this.move = function(position){ 
    $(this.el + ' td').removeClass('active'); 
    $(this.el + ' td:eq(' + (this.position) + ')').addClass("active"); 
    this.check(); 
    this.position += 1; 
    } 
} 

function scoreController($scope){ 
    $scope.score_one = player1.score; 
    $scope.score_two = player2.score; 
} 

그리고는 데이터 바인딩 HTML 파일 : 나는 범위에 뭔가 문제가있는 경우

<div class="container" ng-app="" ng-controller="scoreController"> 

    <h1>A Day at the Races</h1> 

    <ol> 
     <li ng-model="score_one">Mew: {{ score_one }}</li> 
     <li ng-model="score_two">Celebi: {{ score_two }}</li> 
    </ol> 

그래서, 내가 궁금하네요 , 그리고 왜 점수가 올바르게 업데이 트되지 않습니다. 나는 정확하게 앵귤러 링크가 있고 올바르게 뷰를 업데이트하는 입력 필드를 사용하여 작업을 시도했지만 어떤 이유로 이것이 작동하지 않습니다. 나는 $ apply를 보았고 $ apply()에서 $ scope.score_one을 시도했다. 그러나 제대로했는지 확신 할 수 없다.

아이디어가 있으면 알려주세요. 고맙습니다.

Answer 1

특정 구문 문제보다는 코드 설정 방법과 관련이 있다고 생각합니다. 일반적으로 jQuery와 Angular는 서로 잘 맞지 않습니다. 각도 문서에서 :

Does Angular는 jQuery 라이브러리를 사용합니까?

Angular는 응용 프로그램이 부트 스트랩 될 때 jQuery가 응용 프로그램에 있으면 jQuery를 사용할 수 있습니다. 스크립트 경로에 jQuery가 없으면 Angular는 jQLite라고하는 jQuery의 하위 집합에 대한 자체 구현으로 돌아갑니다.

각도 1.3은 jQuery 2.1 이상 만 지원합니다. jQuery 1.7 이상은> Angular에서 올바르게 작동 할 수 있지만이를 보장하지는 않습니다.

jQuery 1.11에서 각도 1.2.15를 사용하고있는 것을 볼 수 있습니다. 따라서 "might"가 올바르게 카테고리에 해당합니다. 내가 너라면, 나는이 도구들 중 하나를 고르고 그걸로 갈 것이다.

마지막으로 Angular로 이동하려면 먼저 모듈을 인스턴스화 한 다음 컨트롤러를 정의해야합니다. 이 같은 것이 작동합니다.

그리고 비슷한 방식으로 점수를 높이는 방법을 만들 수 있습니다. 요컨대, 모든 것을 Angular로 유지하고 jQuery에 대해서도 생각하지 않습니다. Angular는 이와 같은 앱에서 수행하는 양방향 바인딩에 적합하므로 이동하는 것이 가장 좋은 방법이라고 생각합니다. 행운을 빕니다.