angular-directive - jQuery單擊事件不更新範圍

Question

在指令中，單擊jQuery元素時，我正在更新範圍。但它不起作用。什麼是正確的方法來做到這一點？

angular.module('app.directives', []).directive('newContent', function() { 

    return { 

    link: function(scope, element, attrs) { 

     var title = element.find('h1'); //getting the element 
     scope.show = true; 

     var that = scope; 

     title.on('click', function(){ 

     scope.show = false; //not working 

     }) 

    } 

    } 

}) 

Live Demo

Answer 1

嘗試這種使用scope.$apply或更好performancce使用scope.$evalAsync

scope.$apply(function(){ 
     scope.show = false; 
    }) 

var appModules = ['app.directives'] 
 

 
var app = angular.module('plunker', appModules); 
 

 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
}); 
 

 

 

 
angular.module('app.directives', []).directive('newContent', function() { 
 

 
    return { 
 

 
    link: function(scope, element, attrs) { 
 
     
 
     var title = element.find('h1'); 
 
     scope.show = true; 
 
     
 
     var that = scope; 
 

 
     title.on('click', function(){ 
 
     
 
    scope.$evalAsync(function() { 
 
     scope.show = false; 
 
    ); 
 
    }) 
 

 
    } 
 

 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    
 
    <div class="content" my-content> 
 
     <h1>My Content</h1> 
 
    </div> 
 
    
 
    <div class="content" new-content> 
 
     <h1>click me</h1> 
 
     <h2 ng-show="show">My Content</h2> 
 
    </div> 
 
    
 
    </div>