AngularJS 组件绑定未传递对象

Question

接收错误无法读取 PollListCtrl.runQuery 处未定义的属性 'type'。我不确定为什么这是未定义的。我已经在控制台记录了 profile-polls.controller.js ，其中创建了 listConfig 以确保这里有一个对象。响应是

{type: "all", filters: {pollsCreated: Array(3)}}

但是当我尝试将它传递给配置文件中的 poll-list 组件时，它出现未定义状态-polls.html。以下是相关文件的要点。谁能告诉我为什么这没有正确通过？

https://gist.github.com/RawleJuglal/fa668a60e88b6f7a95b456858cf20597

Answer 1

我认为您需要为您的组件定义 watcher。在开始时 listConfig 是未定义的，只有在经过一些延迟（下一个摘要周期）后它才有价值。所以我们创建 watcher 并在 if 语句后取消它。

app.component('pollList', {
  bindings: {
    listConfig: '='
  },
  templateUrl: 'poll-list.html',
  controllerAs: 'vm',
  controller: PollListCtrl
});

function PollListCtrl($scope) {

    var vm = this;

    function run(){
      console.log(vm.listConfig);
    }


    var cancelWatch = $scope.$watch(function () {
        return vm.listConfig;
    },
    function (newVal, oldVal) {

        if (newVal !== undefined){
            run();
            cancelWatch();
        }
    });
}

Demo plunkr

Answer 2

你不应该在你的 angularjs 应用程序中使用 $scope。
您可以使用 ngOnInit() 生命周期挂钩访问 "bindings" 值而不是构造函数。

ngOnInit(){

$ctrl.listConfig = { 类型：'all' };

$ctrl.limit = 5;

}

AngularJS 组件绑定未传递对象

AngularJS component bindings not passing object

angularjs

angular-components