Angularjs 数据绑定与数据属性对象答案

【问题标题】：Angularjs data binding with a data attribute objectAngularjs 数据绑定与数据属性对象
【发布时间】：2013-04-18 08:59:54
【问题描述】：

我有一些 json 附加到页面上的数据属性。 json数据用于在angularjs中建表。我正在使用咖啡脚本和haml。

    app = angular.module("myApp", [])

    app.controller "TableCtrl", ($scope) ->
      $scope.table =  $("#mydata").data("myjson")


    #table{"ng-app"=>"myApp","ng-controller" =>"TableCtrl"}
      %table
        %tbody
          %tr{"ng-repeat"=>"(i,item) in table" }}"}
            %td {{item.name}}

页面将数据加载到表中。在页面的其他地方，用户可以使用 jquery 更改数据属性上的 json。如何在 json 数据和表之间进行 2 路绑定？即我希望表在数据属性上的 json 在本地更改时更改。

【问题讨论】：

这是一个非常奇怪的用例。为什么数据来自 jQuery 而不是 AngularJS？如果全部可能，您应该将数据放入模型/服务中。
我正在更新一个充满 jquery 的旧应用程序，只是想在我处理它时了解不同的部分
我会尽量把数据提取出来作为第一要务；否则将会有更多的头痛。 AngularJS 与 jQuery非常不同。

标签： javascript angularjs coffeescript

【解决方案1】：

你需要告诉 AngularJS 观察$("#mydata").data("myjson") 的任何变化，然后在发生变化时更新$scope.table。尝试将以下代码添加到您的控制器（对不起，我不知道 coffeescript）。

$scope.$watch(
    function () { return $("#mydata").data("myjson");}, 
    function(newJson) {
        $scope.table = newJson;
    },
    true
);

【讨论】：

将字符串传递给$watch 仅适用于范围属性。您需要改用函数。
@JoshDavidMiller - 对，我的粗心！感谢您指出。
不，应该是$scope.$watch( function() { return $("#mydata").data("myjson"); }, ...)。
再次感谢@JoshDavidMiller。我的大脑今天肯定不工作了。
@raphael_turtle - 您的案例需要具有用于比较对象是否相等而不是引用 true 的标志。更新了我的答案。再试一次。