javascript - 从父级访问 Angular 1.x 组件属性

Question

我创建了一个 Angular 1.x 星级组件。要求组件有多个实例，因此需要不同的评级值。

但是我想不出从组件中读取 starCount 变量的方法。我尝试浏览文档，尝试绑定(bind)属性，但无济于事。

这只需要 Vue.js 中的 v-model 属性，但我找不到像这样的 angular 属性。

var app = angular.module('app', []);
app.component('star',  {
    template: `<ul class="star">
        <li class="fa" ng-class="$ctrl.starCount >= 1 ? 'fa-star' : 'fa-star-o'" ng-click="$ctrl.starCount=1" />
        <li class="fa" ng-class="$ctrl.starCount >= 2 ? 'fa-star' : 'fa-star-o'" ng-click="$ctrl.starCount=2" />
        <li class="fa" ng-class="$ctrl.starCount >= 3 ? 'fa-star' : 'fa-star-o'" ng-click="$ctrl.starCount=3" />
        <li class="fa" ng-class="$ctrl.starCount >= 4 ? 'fa-star' : 'fa-star-o'" ng-click="$ctrl.starCount=4" />
        <li class="fa" ng-class="$ctrl.starCount >= 5 ? 'fa-star' : 'fa-star-o'" ng-click="$ctrl.starCount=5" />
    </ul>`,
    controller: function () {
         this.starCount = 0;
    }
});

完整代码和演示在这里: https://codepen.io/anon/pen/RBqYoM

Answer 1

您必须向配置添加绑定(bind)才能将数据传递给组件:

controller: ...,
bindings: {
    starCount: '<'
}

// in your html
<star star-count="3"></star>

不要忘记删除 this.starCount = 0;