Angular $http 后指令未更新

Question

我有一个 angular 指令，如下所示：

myApp.directive('foo', function() {
      return {
        template: '<span>{{foo.bar}}</span>',
        restrict: 'E',
        scope: true,
        controller: 'myController'
      };
    });

编辑我最初使用此控制器设置指令：

 myApp.controller('myController', function ($scope, MyModel) {
        $scope.foo = MyModel.get();
  });

从第二个控制器修改模型似乎工作正常：

myApp.controller('myOtherController', function($scope, MyModel) {
  setTimeout(function() {
    MyModel.set({
      bar: "biz"
    });
  }, 3000);

});

但不适用于此控制器代码：

myApp.controller('myOtherController', function($scope, MyModel) {
   $http.get("/resource").then(function(response) {
    MyModel.set(response.data);
  });
});

我已经确认模型在两个实例中都更新了，但是指令没有使用 $http 请求更新视图。

这里有一个 Plunker 可以让您大致了解。

我尝试了各种 $timeout/$scope.$apply 解决方案，但它们要么什么都不做，要么通过摘要进行中错误。任何帮助将不胜感激

Answer 1

当您使用 .then() 时，您的响应数据在 response.data

myApp.controller('myController', function($scope, MyModel) {
  $scope.foo = MyModel.get();

   $http.get("/resource").then(function(response) {
    MyModel.set(response.data);
  });

});

promise 的 .success() 方法将 response.data 作为第一个参数传递：

myApp.controller('myController', function($scope, MyModel) {
  $scope.foo = MyModel.get();

   $http.get("/resource").success(function(response) {
    MyModel.set(response.data);
  });

});

此外，你在初始化控制器时初始化了 $scope.foo = MyModel.get()，所以 $scope.foo 的值将是你调用 [=32 后的旧值=]()。修复：

myApp.controller('myController', function($scope, MyModel) {
  $scope.foo = MyModel.get();

   $http.get("/resource").then(function(response) {
    MyModel.set(response.data);
    $scope.foo = MyModel.get();
  });

});

Here is a working Plunk

我必须做的唯一更改是从您的运行函数发送的数据

.run(function($httpBackend) {
    var res = {
        bar: "It WORKED"
    };

不太确定在您的工厂实现中调用 $timeout 的目的是什么，并且您的 MyModel 工厂似乎有点复杂（我认为有更简单的方法可以实现您所追求的目标）。

Angular $http 后指令未更新

Angular Directive not updating after $http

javascript

asynchronous

angularjs

angularjs-directive