AngularJS 在指令中的属性更改上触发函数

Question

我们有一个名为actingAs 的指令定义如下。

angular.module('MyApp').directive('actingAs', function () {
    return {
        controller: 'ActingAsController',
        controllerAs: 'vm',
        bindToController: true,
        restrict: 'E',
        transclude: true,
        scope: {
            'onself': '&onSelf',
            'onuser': '&onUser',
            'onupdate': '&onUpdate',
            'actingAsFullNm': '=',
            'actingAsType': '='
        },
        link: function (scope, element, attributes, controller) {
            attributes.$observe('actingAsFullNm', function (oldval, newval) {
                console.log("In Observe Function");
                if (oldval != newval) {
                    console.log( 'Acting as FullNmae changed from : '+oldval+' to: '+newval);
                }
                else  {
                    console.log('Acting as FullNmae oldval :' + oldval + ' newVal: ' + newval);
                }
            });
        },
        templateUrl: 'actingAs.directive.html'
    };
});

它在页面上使用如下

<acting-as on-self="vm.runAsSelf()" on-user="vm.runAsUser(user, type)" on-update="vm.update(idsid)"
               acting-as-full-nm="vm.actingAsFullNm" acting-as-type="vm.actingAsType"></acting-as>

vm.actingAsFullNm 在该指令所在的父页面范围内更新。我们想在这个值改变时触发一个函数或在指令控制器中做一些事情。 因此，我们在指令定义中使用了 Link 函数。 但由于某种原因，链接功能仅在页面加载时执行一次。对vm.actingAsFullNm 的进一步更改不会触发链接功能。不确定我们缺少什么。

编辑：

我也使用了 scope.$watch 如下

link: function (scope, element, attributes, controller) {
            scope.$watch('actingAsFullNm', function (oldval, newval) {
                console.log("In Observe Function");
                if (oldval != newval) {
                    console.log( 'Acting as FullNmae changed from : '+oldval+' to: '+newval);
                }
                else  {
                    console.log('Acting as FullNmae oldval :' + oldval + ' newVal: ' + newval);
                }
            });
        },

仍然是 Console.log 中的链接功能只执行一次..而不是在值更改时

Answer 1

我相信你需要使用 $watch 来代替。

观察与观察 https://stackoverflow.com/a/14907826/5781575

Answer 2

如果您使用的 AngularJs 版本 >= 1.5，我建议您将指令更改为组件（组件具有明确定义的生命周期，接近新 Angular），您可以通过 $ 检测更改onChanges钩子。

如果您不打算将其更改为组件，则可以按照另一个建议使用 scope.watch。

scope.$watch('actingAsFullNm', function () {
    ...
});