回答更新

Question

我遇到了一个问题，我似乎无法在我使用组件的控制器范围内获取属性的值，所以如果我只是输入一个数字作为属性我得到了预期的结果但是尝试做$ctrl.val这样的事情会让我在我的能力范围内不明确，但3会给出正确的结果。有谁知道为什么会这样？

我有一个像这样的组件：

function RatingController() {
    let vm = this
    this.$onInit = function() { 
        console.log("rating: ", vm.rating)
    }
}

export default {
    bindings: {
        rating: '='
    },
    controller: RatingController,
    template: `
     <span>{{ $ctrl.rating }}</span
    `,
}

然后我将其初始化为：

 <div ng-controller="MainCtrl as main">
    <star-rating rating="main.rating"></star-rating>
 </div>

以上内容在我的组件中始终具有未定义的等级，但这样做会得到预期的结果

<div ng-controller="MainCtrl as main">
    <star-rating rating="3"></star-rating>
 </div>

MainCtrl：

export default function CakeController(requestCakes, $routeParams) { 
    let vm = this
    requestCakes.getOne($routeParams.id).then((res) => {
        //compose objects together

        vm = Object.assign(vm, res.data)
    }) 
}

Answer 1

绑定组件中的错误属性。您尝试在组件配置中绑定rating，但您的组件属性称为heartrating

回答更新

初始化组件时，

main.rating值尚未定义（主控制器异步加载数据）。尝试使用$onChanges挂钩而不是$onInit。此外，您应该使用单向数据绑定（使用<而不是=），因为只要更新单向绑定，就会调用$onChanges挂钩（根据Angular {{3使用组件

时，建议不要使用genreally双向数据绑定

Angular 1组件绑定不评估父控制器变量

1 个答案:

回答更新