如果不调用$ scope。$ apply,则不会在视图中反映对范围属性的AngularJS更改

时间:2013-01-26 15:17:33

标签: javascript angularjs

首先,这是一个插件:http://plnkr.co/edit/2gD0AB。这个插件似乎无法正常工作,因为$scope.$on("$viewContentLoaded")不会触发,但在我的机器上它运行正常,我希望你明白这一点。

我正在尝试执行的操作只是将字段对象从$scope.fields移动到$scope.groupFields = [], $scope.listFields = [], $scope.dataFields = [],然后将其拖动到相应的可放置区域。我经理使用jQuery UI和jQuery UI touch punch(只是为了移动安全)。

如果您将一个元素从字段框拖到其中一个空框中,您会注意到屏幕上没有任何事情发生,除了悬挂在它们周围的字段元素。但是如果在console.log($scope.fields)事件监听器中执行drop,您会注意到在每个字段框中都正确设置了所有字段对象。

如果您点击添加元素按钮,那么您只需触发console.log($scope.groupFields);,然后突然所有元素都会在相应的框中正确显示,就像首先想要的那样。

拔掉我的脑筋,在搜索互联网一段时间后,我发现在$scope.$apply()功能之后drop事件中调用的moveField实际上解决了我的问题。< / p>

我不明白为什么。不应该有digest已经运行并根据我在控制器中做的事情更新视图吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

仅仅因为处理这些jQuery drop事件的代码在控制器内部,并不意味着它将在angularjs scope / word下运行。要使这些更改生效,您需要强制angularjs应用程序对其模型进行脏检查。这可以通过调用$apply()$digest()方法来完成。在处理更改$scope属性的jQuery事件或timeout(或interval)之后,您应该始终调用其中一种方法。