Question

我需要将数据从控制器传递到html模板。我可以从console.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;

这是模板：./ test.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中的promises常见的事情，你需要强制使用{{1在asign之后，或

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

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

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

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

2 个答案: