mousedown의 지시어에서 범위 업데이트 Angularjs

Question

지시어에서 컨트롤러 범위를 업데이트하는 데 문제가 있습니다. 아래는 무슨 일이 일어나고 있는지의 기초입니다.

myApp.directive('myDirective', ['$document', function($document) { 
    return { 
     link: function(scope, element, attr, controller) { 
      angular.element(element).bind('mousedown', function(event){ 
       scope.name = 'test'; 
      }); 
     } 
    } 
} 


myApp.controller('myController', ['$scope', function($scope){ 
    $scope.name = 'something'; 
}]); 

HTML은 :

<p>{{name}}</p> 
<p my-directive>Click me</p> 

결과는 위의 항상 내 컨트롤러에 설정하고, test으로 업데이트되지 않습니다 something입니다.

나는 내 컨트롤러에 $watch을 시도하지만, 업데이트, 그래서 난 그냥

Answer 1

jQuery .bind 기능을 사용하고 있으므로 scope.$apply을 사용하여 Angular에 범위 속성을 업데이트했음을 알리십시오.

angular.module('app', []) 
 
    .directive('myDirective', function() { 
 
    return { 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs) { 
 
     angular.element(element).bind('mousedown', function(event) { 
 
      scope.$apply(function() { 
 
      scope.name = 'test'; 
 
      }); 
 
     }); 
 
     } 
 
    } 
 
    }) 
 
    .controller('ctrl', function($scope) { 
 
    $scope.name = 'something'; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <p>{{name}}</p> 
 
    <p my-directive>Click Me</p> 
 
</div>

Answer 2

지침이 자신의 격리 된 범위가 ... 뭔가를 누락 될 필요가 없습니다.

return { 
    scope: { 
     name: '=' 
    }, 
    link: function(scope, element, attr, controller) { 
     angular.element(element).bind('mousedown', function(event){ 
      scope.name = 'test'; 
     }); 
    } 
} 

이것은 당신이 변수 지시 사이 name을 범위를 공유 할 것을 각도 말한다 : 당신이 지침의 범위와 컨트롤러의 범위 사이에 뭔가를 공유하려는 경우, 당신은이 같은 지침 정의에 포함 할 필요가 이 지시어를 호출하는 범위. 등호 (=)를 사용하면 양방향 데이터 바인딩으로 정의됩니다.