将数据从控制器传递到 HTML 模板

Question

我需要将数据从控制器传递到html模板。我可以从控制台查看数据.log但我无法通过 DOM 看到它。

这是我的组件：

import ItemService from '../../services/test.service.js'
const TestComponent = {
    controllerAs: 'testCtrl',
    controller: function ($http) {
                    ItemService.getItems($http)
                    .then(data => {
                        this.items = data.categories;
                        console.log('inside controller', this.items);
                        })
    },
    template: require('./test.html'),
    bindings: {
    }
};
export default TestComponent;

这是模板：./测试.html

<div class="test">
    NAMES OF ITEMS:
    <ul>
        <li ng-repeat="item in testCtrl.items">
          <p>{{item.name}}</p>
        </li>
      </ul>
</div>

为什么我看不到列表？

Answer 1

我相信this的上下文可能在$http的回调中发生了变化。它不再指向您的控制器。

尝试在局部变量中存储对控制器上下文的引用(例如：self(：

var self = this;
ItemService.getItems($http)
.then(data => {
    self.items = data.categories;
    console.log('inside controller', self.items);
})

Answer 2

如果这是您的控制器并且仍然没有显示，则可能是数据没有被范围消化，这是 angularjs 中 promise 的常见情况，您需要在 asign后强制使用 $scope.$digest()，或者

$scope.$apply(function(){
//assign inside here
});

如果您处于一个摘要周期的中间，这可能会导致问题，因此更好的方法是使用 $timeout：

$timeout(() => {
//assign here
});