Question

我在使用angular绑定数据时遇到问题我的模特：

<div id="ng-app-MyApp">
    <ng-view></ng-view>
</div>

控制器：

angular.module("MyApp.controllers", []).
controller("myController", function($scope, service) {
    $scope.someprop = "12";
    $scope.nameFilter = "text here";
    $scope.val = "";

    setTimeout(function() {
        $scope.val = "321";
    }, 1000);

    $.when(service.getItems()).done(function (items) {
        console.log(items.length);
        $scope.someprop = "hello";
    });
});

的index.html：

<div>
    <input type="text" ng-model="nameFilter" />
    <div>{{nameFilter}}</div>
    <table>
        <tr>
            <td>{{someprop}}</td>
            <td>{{val}}</td>
        </tr>
    </table>
</div>

我使用手动绑定（angular.bootstrap($("#ng-app-MyApp")[0], ["MyApp"]);）。 service.getItems()返回jQuery延迟对象。当页面加载时，我希望someprop的值变为＆＃34;你好＆＃34;并且val将等于＆＃34; 321＆＃34;。但事实上没有任何反应当我开始输入文本框时，然后执行数据绑定，我可以看到someprop =＆＃34; hello＆＃34;和val =＆＃34; 321＆＃34;在UI上。

我无法弄清楚，为什么这些属性不会自动更新，但只有当我开始在文本框中输入时才会更新？

Answer 1

添加$scope.$apply()

  $.when(service.getItems()).done(function (items) {
        console.log(items.length);
        $scope.someprop = "hello";
        $scope.$apply();
    });

您需要调用它，因为您正在处理angular的框架（jquery）之外的回调，并且不会引发刷新依赖项的事件。

$apply是“重新加载/刷新”绑定的函数

如果可能的话，我建议你尝试在角度代码中避免使用jQuery

如果service.getItems()是一个简单的ajax请求，请使用$http angular的服务而不是jQuery并编辑您的自定义服务，如下所示：

服务：

...
service.getItems = function()
{
   return $http.get('<url>');
};
...

控制器：

service.getItems()
   .success(function(data)
         {
            console.log(items.length);
            $scope.someprop = "hello";
         });

请注意，使用纯角度，您无需添加$apply()

Answer 2

你错过了$ digest进程，该进程负责angularjs中的双向数据绑定（尽管为什么你可以在使用纯粹的angularjs完全相同时使用jQuery for promises）

避免你可以采取多种方式

$.when(service.getItems()).done(function (items) {
  console.log(items.length);
  $scope.apply(function(){
    $scope.someprop = "hello";
  })
});

$.when(service.getItems()).done(function (items) {
  console.log(items.length);
  $timeout(function(){
    $scope.someprop = "hello";
  })
});

$.when(service.getItems()).done(function (items) {
  console.log(items.length);
  $scope.someprop = "hello";
  $scope.$digest()
});

虽然最后一个有点棘手，如果应用程序很大并且更频繁地发生摘要可能会引发错误digest already in progress

双向绑定无效

2 个答案: