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> 

上記の結果は私のコントローラで設定されたことを常にsomethingあり、そしてtestに更新されることはありません。

私は私のコントローラで$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を共有したいという角度告げると、どんなスコープでもそのディレクティブが呼び出されます。等号（=）を使用すると、双方向データバインディングとして定義されます。