Question

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

模板文件：

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

在定义控制器时，我指定要像这样通过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);
    };
});

当尝试输出vm.id的值时，我收到的所有信息都是'undefined'。另外，当我尝试通过{{vm.id}}输出值时，没有数据输出，这表明数据永远不会到达组件中。

Answer 1

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

示例

用法

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

在SearchCondition

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

这将显示数据值，因为已将数据分配给道具

现在，您需要在这里了解一件事。使用Components Angular 1时，默认的controllerAs值为$ ctrl，因此，如果SearchCondition是组件而不是指令prop，则为{{$ctrl.prop}}

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

如果要更改controller的默认值，只需在创建这样的组件时定义它即可。

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

如果这样定义，{{vm.id}}可以使用。

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

Angular 1.6组件绑定返回未定义

1 个答案: