model-view-controller - 在指令中更新 angularjs 中的 Controller 模型

Question

我试图理解 angularJS，它的方法与我在脏检查模型更新中看到的方法不同。

基本上，我有一个指令 ng-draggable，它使元素...可拖动。我有一个 model 与每个具有属性 x 和 y 的元素链接 - 与模型链接的元素的位置 - 我想要更新模型的指令。

为此，我尝试在指令中使用 $apply 函数并设置模型值 x 和 y。然后我还使用 $observe 函数来更新 View :here is my jsfiddle 。 (注意我使用工厂来捕获鼠标事件)

        var mousemove = function(event) {
           var y = event.screenY - startY;
           var x = event.screenX - startX;
              scope.$apply(function(){
                  attr.$set('ngModel', {'x': x, 'y': y});
              });
         }

看起来效果不错。但是，当我使用保存按钮检查模型值(它在控制台中打印模型)时，位置 x 和 y 不会更新。

所以我的问题是如何让它发挥作用？更一般地说，这里发生了什么？关于 angularJS 中的 MVC 模式的任何阅读建议(我发现开发人员指南对于初学者来说有点苛刻)

感谢您的帮助。

Answer 1

您的方法的问题在于您正在更改整个 ngModel 引用，而不是仅更改其属性之一(x 和/或 y)。当您这样做时，您会失去与初始 ngModel (players 数组内的对象)的连接，从而失去与“真实”模型(对象 play)。

尝试这样做:

scope.$apply(function() {                 
    model.$modelValue.x = event.screenX - startX;
    model.$modelValue.y = event.screenY - startY;
});

jsFiddle: http://fiddle.jshell.net/y7nVJ/