使用 scope.$watch 观察函数何时执行

Question

假设我有一个名为 my-directive 的自定义指令，它具有默认范围设置（scope: false，这意味着它共享包含该指令的（父）控制器的范围），并且我有一个函数 my_function，附加到控制器的作用域。我想知道在自定义指令的 link 函数中是否可以使用 scope.$watch 来观察 my_function 何时执行？

这里有一个代码来说明：

<div ng-controller="MyCtrl">

    <my-directive></my-directive>

</div>

控制器：

app.controller('MyCtrl', function($scope) {

    $scope.my_function = function() {
    ...
    }

});

自定义指令：

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        [scope: false,]
        ...
        link: function(scope, element, attrs) {

            // can I scope.$watch my_function here to check when it executes?

        }
    }
});

更新：

以下是我提出这个问题的原因：当 my_function（本质上是通过 $http.get 的检索函数）执行时，它应该更新一个对象，比如 my_data。如果我尝试scope.$watchmy_data，可能会出现my_function执行完而my_data没有变化的情况（比如我编辑[=20=中的一个条目时=] 并决定取消更新），因此我想在 link 函数中执行的部分代码未执行。所以我想确保我在 link 函数中的代码在 my_function 执行时执行，无论是否有变化 my_data.

Answer 1

根据您要执行的操作，您可能根本不需要 $watch。

如果函数永远不会改变，您可以制作一个虚拟包装器。

link: function(scope, element, attrs) {

        var oldFunc = scope.my_function;
        scope.my_function = function(sameArgs){
            //method_was_called();
            if(oldFunc){oldFunc(sameArgs);}
        }

    }

然后您可以在包装函数中执行您想要的任何逻辑，在您运行 'super' 方法之前或之后。

也检查一下 Javascript: Extend a Function

Answer 2

这是我能想到的两种解决问题的方法。

1。使用计数器

调用 my_function:

时，您始终可以递增计数器

// This will reside in your controller
$scope.counter = 0;
$scope.my_function = function () {
  // do your logic
  $scope.counter++;
};

// This will reside in your directive
$scope.$watch( "counter", function () {
  // do something
});

2。只需观看 `my_data`

假设 my_function 将总是覆盖 my_data 变量，您可以使用 $watch 的默认 Angular 行为。您不必关心您的后端是否有新闻给您，参考永远不会相同。

// in your controller
$scope.my_function = function () {
  $http.get(...).then(function ( response ) {
    $scope.my_data = response.data;
  });
};

// in your directive
$scope.$watch( "my_data", function () {
  // do something
});

显然，这是执行此操作的更简洁的方法，但如果由于以下原因之一而不进行单元测试，您可能会遇到麻烦：

您在 my_data 周围添加任何可能与您的观察者冲突的逻辑；
您想缓存您的 HTTP 调用。

希望对您有所帮助！祝你好运。

使用 scope.$watch 观察函数何时执行

Using scope.$watch to observe when a function executes

angularjs

angularjs-directive

1。使用计数器

2。只需观看 `my_data`

使用 scope.$watch 观察函数何时执行

Using scope.$watch to observe when a function executes

angularjs

angularjs-directive

1。使用计数器

2。只需观看 my_data

2。只需观看 `my_data`