在指令的 link 函数中修改事件中的范围变量

Question

我在指令的 link 函数中的一个元素上有一个 jQuery 事件。我想修改该事件回调中的范围变量。它不起作用 - 呈现该变量的模板永远不会更新：

joyableApp.directive('foobar', [function() {
  var FoobarLink = function(scope, element, attrs){
    scope.foo = 'bar';
    element.click(function(){
      console.log("clicked!");
      scope.foo = 'clicked_result';
    });
  };
  return {
    template: '<div>foo = {{foo}}</div>',
    scope: {},
    link: FoobarLink
  }
}]);

在此示例中，我尝试在单击指令元素时更新 scope.foo。但是，当我运行并单击该元素时，模板不会从 bar 更新到 clicked_result。我怀疑我遗漏了一些关于 link 和 scope 如何在这里工作的基本知识。

一些不相关的背景故事，以防万一：我正在尝试创建一个将在 <input> 字段上执行的指令。当您关注此输入字段时，它会显示一个弹出工具提示。所以使用该指令的界面看起来像 <input input-tooltip content=‘some tooltip content here’>。但是，为此，我需要指令来侦听 focus 事件的根元素。我能找到的唯一方法是在传递给 link 函数的元素上使用 jQuery 事件。但是，在该事件的焦点事件的回调中，我似乎无法成功修改范围变量。

Answer 1

将 DOM 操作包装在 $timeout 中。

  element.click(function(){
    console.log("clicked!");
    $timeout(function () {
      scope.foo = 'clicked_result';
    },0);

  });

$timeout 将导致安全摘要循环开始。不要忘记注入 $timeout:

joyableApp.directive('foobar', ['$timeout', function($timeout) {

希望对您有所帮助。

Answer 2

  element.click(function(){
    console.log("clicked!");
    scope.$apply(function () {
      scope.foo = 'clicked_result';
    });

  });

在这里使用 $apply 是合适的，不需要注入 $timeout。以我的经验，$timeout只有在你修改了link函数中的DOM，需要等待angular编译添加的元素的情况下才有用。

Answer 3

$scope.foo要到Angular运行秒才会刷新到digest loop，也就是所谓的dirty check。在指令中，您需要自己手动触发摘要循环，如下所示

scope.$apply(function () {
  scope.foo = 'clicked_result';
});

但是你可能会运行进入 Error: $digest already in progress，所以你最好使用 evalAsync 或 applyAsync 来触发安全摘要循环，例如

scope.$evalAsync(function () {
  scope.foo = 'clicked_result';
});

在指令的 link 函数中修改事件中的范围变量

Modifying scope variables in an event in a directive's link function

javascript

angularjs

angularjs-directive

angularjs-scope