我遇到了一个问题,我似乎无法获取使用组件的 Controller 范围内的属性值,因此如果我只输入一个数字作为属性,我就会得到预期的结果但尝试做类似 $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>
主控件:
export default function CakeController(requestCakes, $routeParams) {
let vm = this
requestCakes.getOne($routeParams.id).then((res) => {
//compose objects together
vm = Object.assign(vm, res.data)
})
}
最佳答案
您在组件中绑定(bind)了错误的属性。您尝试绑定(bind)rating
在组件配置中,但您的组件属性称为 heartrating
答案更新
main.rating
组件初始化时尚未定义值(主 Controller 异步加载数据)。尝试使用$onChanges
钩子(Hook)而不是 $onInit
。此外,您应该使用单向数据绑定(bind)(使用 <
而不是 =
),因为 $onChanges
每当更新单向绑定(bind)时都会调用 hook(根据 Angular docs ),并且在使用组件时不建议使用 2 向数据绑定(bind)
关于javascript - Angular 1 组件绑定(bind)不评估父 Controller 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42200574/