angular-directive - jQuery 点击事件不更新范围

Posted 2023-02-22

【中文标题】angular-directive - jQuery 点击事件不更新范围

【英文标题】：angular-directive - jQuery click event not updating the scope

【发布时间】：2016-09-27 04:47:38

【问题描述】：

在指令中，单击 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

【参考方案1】：

试试这个使用scope.$apply或者为了更好的性能使用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>