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

Question

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

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

这只需要 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

您必须在配置中添加绑定才能将数据传递给组件：

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

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

别忘了删除this.starCount = 0;