Javascript Angular 1.6组件绑定返回未定义的

我已经建立了一个示例，希望将ID传递给我的组件。我的理解是，使用双向数据绑定，我会这样调用组件

模板文件：

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

---

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

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

范例

用法

如果它是这样定义的{{vm.id}}就可以工作了

我建议您在定义组件时查看文档中的所有选项以及默认值。

---

我不确定

id

是否是最好的属性名。我从data、id、searchId等中尝试了几次。当我尝试使用{{vm.id}}（带有controllerAs:'vm'集），{{$ctrl.id}，{{id}}输出数据时，没有返回任何数据，这就是为什么我感到困惑的原因，因为据我所知，我已经正确地设置了它。当我删除整个html文件并将其替换为{{vm.id}时，我发现了这个问题。我的文件顶部有“”，它似乎干扰了通过的数据。谢谢你的帮助

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);
    };
});

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

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

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