Question

我正在使用两个不同的控制器。

第一个控制器前端有两个按钮。一个是递增按钮，另一个是递减按钮。当按下一个按钮时，表示按下了哪个按钮的值存储在$ rootScope中，并且广播一个事件让第二个控制器知道如何开始行动。

第二个控制器显示（使用ngRepeat）对象中的每个元素。在此应用程序中，每个元素代表一个学生按下递增或递减按钮时，第二个控制器必须更新每个学生的成绩（我们正在实施曲线）。

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

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

还有一种角度方式来延迟每次转换（.ng-enter-stagger和.ng-leave-stagger），我想利用它，但我甚至无法得到我的指示来查看更改学生的成绩。

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

scope: {
            class: '='
        },

这样该指令可以访问学生对象中的$ watch更改，但没有太多运气。我也试过使用$ observe，但也没有运气。

有人知道我做错了什么吗？我应该使用postLink功能吗？我的JSFiddle是here。

AHH！这应该很简单：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属性和事件，您可能会发现通过多种方法可以轻松生活。

监视{{values}}上的更改以触发对DOM的指令操作的问题

1 个答案: