HTTP获取Angular 1.5组件

我正在尝试在AngularJS中使用1.5组件。我有一个服务使用$ HTTP获取我的JSON文件并返回承诺。然后我解决我的组件控制器中的承诺，并使用this.work将其分配给控制器上的值。虽然这不会显示在我的HTML页面中。如果这是令人困惑的，我在代码中加入了一些更好的解释。HTTP获取Angular 1.5组件

我的理解是，解决承诺（在我的控制器中）是异步发生的，但一旦解决了，为什么我没有在视图中显示更新已更改为变量$ctrl.work。相反，我从来没有从变量中获得一个值。

// Component 
    (function() { 
     angular.module('development') 
      .component('pgDev', { 
       templateUrl: 'app/development/development.template.html', 
       controller: ['workList', function (workList) { 

        //this.work = 'HELLO WORLD'; // <- this shows up in the html if uncommented 

        workList.getWorkItems().then(function (d) { 
         console.log(d.test); // outputs: myjsonfile 
         this.work = d.test; // <- this doesnt show in the html 
        }); 

       }] 
      }) 
    }()); 

    // HTTP Get Service 
    (function() { 
     angular.module("development").factory("workList", ["$http", 
      function ($http) { 
       return { 
        getWorkItems: function() { 
         return $http.get("data/worklist/worklist.json").then(function (d) { 
          return d.data; 
         }); 
        } 
       } 
      }]) 
    })(); 

    // html 
    workitems: {{$ctrl.work}}

来源

2016-11-20 okayilltry

你正在失去执行的背景下，这意味着你的this回调函数内如果没有和组件控制器的实例。一个简单（和现代）的解决方案是使用arrow function而不是普通的匿名：

workList.getWorkItems().then(d => { 
    this.work = d.test; 
});

来源

2016-11-20 19:19:29 dfsq

谢谢。如果你知道，或者可以指向正确的方向，那么使用'this'在控制器中分配内容似乎是有问题的，因为我不能在函数内部使用'this'分配控制器，因为正如你在你的答案，这个上下文不会与控制器组件相关。那么应该怎样做（而不是使用箭头函数）？ – okayilltry

你可以在开头保存参考以正确使用'this'并稍后使用它：'const self = this; ... self.work = d.test'。但这是老派。箭头功能是最纯粹的解决方案。 – dfsq

HTTP获取Angular 1.5组件

回答

相关问题