Angular 如何从 onclick 指令更改控制器范围

Question

这是我的指令

.directive('closeMapMessage', function($log) {
  'use strict';
  return function(scope, element) {
    var clickingCallback = function() {
    angular.element('.map').fadeOut("slow");
    };
    element.bind('click', clickingCallback);
  };
})

如何更改控制器中的范围变量？

<div class="msg-mobile" ng-show="showInstructionModal">
  <div class="close-map-msg ok-got-it-footer" close-map-message>Ok, got it. </div>
</div>

我基本上想在调用关闭指令时将我的 showInstructionModal设置为 false。

Answer 1

您应该运行在点击事件发生后手动摘要循环以更新所有范围绑定

.directive('closeMapMessage', function($log) {
  'use strict';
  return function(scope, element) {
    var clickingCallback = function() {
      angular.element('.map').fadeOut("slow");
      scope.$apply();
    };
    element.bind('click', clickingCallback);
  };
})

Answer 2

从当前的代码片段中，很难说出您为什么不使用为 Angular 量身定制的模态解决方案，即 AngularUI's modal.

但是，在您当前的代码中，您将点击事件附加到 Angular 无法识别的元素。这就是为什么在下一个 $digest 循环有运行之前，点击该元素不会生效。此外，在 Agular 中，您通常不会按照您尝试的方式使用指令。我建议更新指令以同时提供 HTML，然后使用 ng-click 属性通过 Angular.

附加事件处理程序

将您的指令代码更新为：

.directive('closeMapMessage', function($log) {
  'use strict';
  return {
      restrict: "AE",
      link: function(scope, element) {
         scope.closeModal = function() {
             angular.element('.map').fadeOut("slow");
             scope.showInstructionModal = false; // probably need to put this in a $timeout for example to show the fading of the element
         };
      },
      template: '<div class="close-map-msg ok-got-it-footer" ng-click="closeModal()">Ok, got it.</div>'
  };
})

然后相应地更新您的 HTML：

<div class="msg-mobile" ng-show="showInstructionModal">
  <close-map-message></close-map-message>
</div>

Angular 如何从 onclick 指令更改控制器范围

Angular how to change controller scope from onclick directive

directive

angularjs