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>

当我的close指令被调用时，我基本上想要设置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指令更改控制器范围

2 个答案: