연결 함수 클릭 핸들러에서 컨트롤러 메서드를 호출하면 뷰가 업데이트되지 않는다.

Question

내 문제는 다음과 같다. 나는 요소에 "클릭"콜백을 바인딩 할 분리 된 범위가있는 지시문을 사용한다. 길고도 짧은 이야기, 나는이 비슷한 싶지 : - ($scope.name은 동일하게 유지)는 reset() 기능을 발사하지만, 컨트롤러의 범위는 변경되지 않습니다

... 
<div test value='name' call='reset()'></div> 
... 

app.directive('test', function() { 
    return { 
     template: '<button>{{value}}</button>', 
     scope: { 
      value: '=', 
      call: '&' 
     }, 
     link: function(scope, elem, attrs){ 
      elem.bind('click', function(){ 
       scope.call(); 
      }) 
     } 
    } 
}); 

var myCtrl = function($scope){ 
    $scope.name = 'John'; 

    $scope.reset = function(){ 
     $scope.name = "Some random name"; 
     console.log('reset name!'); 
    }; 
} 

아아를이 작동하지 않습니다. 그러나 템플릿에 바인딩하는 경우 :

template: '<button ng-click="call()">{{value}}</button>' 

모두 정상적으로 작동합니다. 문제는 실제 작업에서 템플릿 옵션을 사용하지 않기 때문에 연결 함수 내부에서이 바인딩을 수행 할 수있는 방법이 있는지 묻고 싶습니다.

감사합니다.

Answer 1

지시문에서 설정 한 클릭 핸들러가 실행되면 Angular의 "외부"에서 실행됩니다. $scope.name이 실제로 설정 중이며 (보고하려면 로그), Angular는 변경 사항을 알지 못하므로보기가 업데이트되지 않습니다. 클릭 핸들러에 scope.$apply()을 추가하여 Angular가 digest cycle을 입력하면보기가 업데이트됩니다.

link: function(scope, elem, attrs){ 
    elem.bind('click', function(){ 
     scope.call(); 
     scope.$apply(); 
    }) 
} 

Fiddle.

Answer 2

<div test value='name' ng-click="call()"></div> 

지시어가 없습니다.

는 각도 스타일을 유지하려는 경우/* * /이 가능한 한 적은