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

我正在使用两个不同的控制器。监视{{values}}对DOM触发器指令操作的更改问题

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

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

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

我想写一个指令按钮的值发生变化之前，将从animate.css加个班，这将引发消逝动画。然后我想要完成动画并更新每个等级。最后，我想删除第一个动画（fadeOut）的类并添加另一个类（fadeIn）。当fadeIn动画完成时，我想删除fadeIn类，以便将来的动画（增加和减少按钮按下）正确加载。

还有一种方法可以延迟每个转换（.ng-enter-stagger和.ng-leave-stagger），我想利用它，但我甚至无法获得我的指令以查看更改一个学生的成绩。

我已经尝试使用合格的类对象，以我的指令：

scope: { 
      class: '=' 
     },

使该指令访问$看学生对象中的变化，但没有多少运气。我已经尝试使用$观察，但也没有运气。

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

AHH！这应该很简单：S

来源

2014-05-20 Shawgrin

您不需要为您的指令设置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属性和事件是由若干措施要容易得多。

来源

2014-05-20 20:59:37

谢谢！它做到了。：d – Shawgrin

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

回答

相关问题