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

Posted 2023-02-23

【中文标题】从父级访问 Angular 1.x 组件属性

【英文标题】：Accessing angular 1.x component property from parent

【发布时间】：2019-01-16 14:25:00

【问题描述】：

我创建了一个 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

【参考方案1】：

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

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


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

别忘了删除this.starCount = 0;

【讨论】：

如何从主应用访问它？

您可以在控制器中为您想要使用星形组件的模板使用变量，例如$scope.starCount = 5; 并写在html中<star star-count="starCount"></star>。

你能展示一个演示吗？我试过这个codepen.io/anon/pen/RBqYoM 但它不起作用

它没有更新值

我使用两种方式绑定来修复它