带有“控制器作为”的 Angular、Typescript 和 Angular UI答案

【问题标题】：Angular, Typescript and Angular UI with "controller as"带有“控制器作为”的 Angular、Typescript 和 Angular UI
【发布时间】：2016-04-11 20:40:13
【问题描述】：

主题中的组合让我很难过，我敢肯定这是某个地方的简单错误。

控制器：

  class JobCtrl {

      job: Object;  

      public $inject = ['$log', '$resource', 'ApiDataEndpoint', '$stateParams'];  
      constructor(public $log, public $resource, public ApiDataEndpoint, public $stateParams ) {      
           var JobRes = $resource(ApiDataEndpoint.url+'job/:id', {});

           var jobCall = JobRes.get({ id: $stateParams.id},function(){
               this.job = jobCall;
           })
      }  
  }

路由是这样定义的：

.state('app.job', {
        url: '/jobs/:id',
        views: {
            'menuContent': {
                templateUrl: 'templates/job.html',
                controller: 'JobCtrl',
                controllerAs: 'vm'
            }
        }
    })

在我看来，我得到了这个：

<p>
 Name: {{vm.job.Name}}
</p>

但是当回调返回时视图永远不会更新。我猜这要么是异步问题，要么是范围问题。获取资源完美无缺，视图永远不会更新。似乎我无法从回调中设置这项工作。我在这里错过了什么？

【问题讨论】：

您在视图中看到{{vm.job.Name}} 了吗？如果是这样，您的代码无效，应该有错误。还是你只看到Name:？
我只看到名称：我认为 JS 有效我只是无法从回调中设置 this.job... 如果我将代码更改为使用 $scope 并删除“as vm”，然后在回调中设置 $scope.job 一切正常，但我想使用“this”语法
在处理资源时，直接分配东西应该可以正常工作，而不是使用回调：this.job = JobRes.get({id: $stateParams.id}); 应该足够了
@iCediCe 这是一些 $resource 魔法！但基本上，它会在异步调用完成时保留引用并更新对象。您可以在文档中了解它
@iCediCe 我更喜欢将 $http 包装到异步服务中。如果你更喜欢 $resource 风格，你应该看看 RestAngular

标签： javascript angularjs typescript angular-ui-router angular-resource

【解决方案1】：

这在回调函数中不可用，就像您实现它的方式一样。更改为使用 lambda，它将是：

从这里：

var jobCall = JobRes.get({ id: $stateParams.id},function(){
           this.job = jobCall;
       })

到这里：

var jobCall = JobRes.get({ id: $stateParams.id}, (response) => {
           this.job = response.data;
       });

【讨论】：

这似乎不起作用。问题不是访问响应，而是将其分配给“this”。 cmets中@Gustav对原始问题的解决方案有效......

【解决方案2】：

我认为你可以做这样的事情（未经测试）：

var jobCall = JobRes.get({ id: $stateParams.id},function(response){
    job = response.data;
})

【讨论】：

这是我的第一个猜测，但你确定这不应该超出构造函数范围吗？
简单地做job = response.data;