Angularjs   发布时间:2019-10-10  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 角度组件绑定未定义大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试用ngRoute组合我的第一个角度组件,到目前为止,我无法获得要解决的数据.
配置:
.when('/myfirstcomponent',{
    template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>',resolve: {
        claimKeys: ['$http',function($http) {
            $http.get('server/claimkeys.json').then((response) => {
                var claimKeys = response.data.DATASET.TABLE;
                return claimKeys;
            });
        }]
    }
})

零件:

.component('myfirstcomponent',{
        bindings: {
            'claimKeys': '@'
        },templateUrl: 'components/component.html',controller: [function() {
            this.$onInit = function() {
                var vm = this;
                console.log(vm.claimKeys);
            };


        }]

组件的html只有一个带有一些随机文本的p元素.

我可以看到调试时我正在检索数据,但我无法在组件控制器上访问它…

编辑:感谢下面接受的答案,我解决了我的问题.它与异步调用的问题没有任何关系,但与我如何定义我的路由和组件有关.请参阅以下代码进行修复.再次感谢.

一些问题:

>正如你所说的声明指令中的键应该是声明键
>它的绑定应该是’<' (单向绑定)或'='(双向绑定),但不是'@',只是传递给指令在引号之间找到的字符串
>在你的指令的控制器var vm = this;应该在上面
$onInit函数而不在其中(范围不同)
> resolve.claimkeys应该返回$http的承诺,而不仅仅是调用

> claimKeys应该被路由器的控制器作为注入接收并传递给它的模板
> controllerAs:路由器应该使用’$resolve’

app.component('myfirstcomponent',{
  bindings: {
    'claimKeys': '='
  },template: 'components/component.html',controller: function() {
    var vm = this;
    this.$onInit = function() {            
      console.log(vm.claimKeys);
    };
  }
});

app.config(function ($stateProvider) {
  $stateProvider.state('myfirstcomponent',{
    url: '/myfirstcomponent',template: '<myfirstcomponent claim-keys="$resolve.claimKeys"></myfirstcomponent>',resolve: {
      claimKeys: ['$http',function($http) {
        return $http.get('claimkeys.json').then((response) => {
          return response.data.DATASET.TABLE;
        });
      }]
    },controller: function (claimKeys) {
      this.claimKeys = claimKeys;
    },controllerAs: '$resolve'
  })
});

plunker:http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview,我在这里使用.state而不是.when用于路由.

大佬总结

以上是大佬教程为你收集整理的angularjs – 角度组件绑定未定义全部内容,希望文章能够帮你解决angularjs – 角度组件绑定未定义所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: