javascript - Angular 1.6 组件绑定(bind)返回未定义

Question

我已经设置了一个示例，我希望将 ID 传递给我的组件。据我了解，使用双向数据绑定(bind)我会像这样调用组件

模板文件:

<div ng-controller="searchCtrl as vm">
    <search-condition id="vm.id"></search-condition>
</div>

在定义 Controller 时，我指定希望通过 vm.id 在组件之间进行双向绑定(bind)，如下所示。

comp.component('searchCondition', {
    templateUrl: 'Core/Views/search-condition.html',
    bindings: {
        id: '='
    }
});
comp.controller('searchConditionCtrl',function($scope){
    var vm = this;
    this.$onInit = function() {
        console.log(vm.id);
    };
});

当尝试输出 vm.id 的值时，我收到的都是“未定义”。此外，当我尝试通过 {{vm.id}} 输出值时，没有输出任何数据，这表明数据永远不会到达组件中。

Answer 1

当您通过 props 传递值时，变量会更改为 prop 名称。

示例

使用

<search-condition prop="data"></search-condition>

在搜索条件中

<div>{{prop}}</div>

这将显示数据值，因为数据被分配给 prop

现在您需要了解一件有关 Angular 的事情。对于组件，Angular 1 默认使用 $ctrl 来指定controllerAs 值，因此如果 SearchCondition 是一个组件而不是指令 prop，则为 {{$ctrl.prop}}

在您的情况下尝试{{$ctrl.id}}，它应该显示在搜索条件的模板中

如果您想更改controllerAs的默认值，只需在创建组件时定义它即可。

.component('myCoolComponent', {
  controllerAs: 'vm',
  bindings: { ... }
})

如果像这样定义 {{vm.id}} 就可以了。

我建议您查看文档，了解定义组件时拥有的所有选项以及默认值。 https://docs.angularjs.org/guide/component