Angular 指令在 $http 之后没有更新

Question

我有一个看起来像这样的角度指令：

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()，因此在您调用 MyModel.set() 后，$scope.foo 的值将是旧值。修复：

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 工厂似乎有点复杂（我认为有更简单的方法可以完成您所追求的目标）。