javascript - 监控 {{values}} 上的更改以触发 DOM 指令操作时出现问题

Question

我正在使用两个不同的 Controller 。

第一个 Controller 的前端有两个按钮。一个是增量按钮，另一个是减量按钮。当按下按钮时，表示按下哪个按钮的值将存储在 $rootScope 中，并且会广播一个事件，让第二个 Controller 知道要采取行动。

第二个 Controller 显示(使用 ngRepeat)对象中的每个元素。在此应用程序中，每个元素代表一个学生。当按下递增或递减按钮时，第二个 Controller 必须更新每个学生的成绩(我们正在实现一条曲线)。

[{
"name": "value",
"grade": "value"
},{
"name": "value",
"grade": "value"
},{
.
.
.
}];

我正在尝试编写一个指令，该指令将从 animate.css 添加一个类在按钮的值发生更改之前，这将触发淡出动画。然后我想完成动画并更新每个等级。最后，我想删除第一个动画的类(fadeOut)并添加另一个类(fadeIn)。当 fadeIn 动画完成时，我想删除 fadeIn 类，以便将来的动画(按下递增和递减按钮)正确加载。

还有一种延迟每次转换的 Angular 方式(.ng-enter-stagger 和 .ng-leave-stagger)，我想利用它，但我什至无法让我的指令查看 a 上的更改学生的成绩。

我尝试使用以下方法将类对象传递给我的指令:

scope: {
            class: '='
        },

以便该指令可以访问学生对象中的 $watch 更改，但运气不佳。我也尝试过使用 $observe，但也没有成功。

有人知道我做错了什么吗？我应该使用 postLink 函数吗？我的 JSFiddle 是 here .

啊啊!这应该很容易:S

Answer 1

您无需为指令设置 scope: {} 即可访问父范围值。事实上，这是一种适得其反的措施。

相反，将 $watch 添加到链接函数中，并将 true 作为第三个参数传递。这将指示函数对对象值的更改进行深入检查，而不是进行浅层比较，后者始终将对象引用与其自身进行比较，因此永远不会触发回调。

link: function(scope, element, attrs){
    $timeout(function(){$animate.removeClass(element, 'animated bounce');},1000);
    scope.$watch('class', function(newValue, oldValue) {
      if (newValue !== oldValue) { 
          console.log('new value:', newValue);
      }
    }, true);
}

Updated JS Fiddle

您可能还会发现，如果您创建一个服务来管理您的数据，那么通过多种措施，生活会变得更加轻松，并且cross-component methods而不是使用 $rootScope 属性和事件。