Angular Directive在$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$应用解决方案，它们要么什么都不做，要么通过一个正在进行的摘要错误。如有任何帮助，将不胜感激

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();
  });
});

这是一个工作的Plunk

我唯一要做的改变是从你的运行函数发送的数据

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

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