AngularJS 1.7：父控制器点击修改按钮组件文本失效问题

我来帮你拆解下问题根源，然后一步步给出修复方案：

问题1：组件内部点击事件拼写错误且未实现 #

你的组件模板里写的是ng-click="$ctrl.toggleActionn()"，这里多了一个冗余的n（正确名称应为toggleAction），而且组件控制器里完全没实现这个方法。用户点击按钮时Angular会直接抛出错误，导致后续逻辑都无法执行，这是文本没更新的核心原因之一。

问题2：父组件ng-click绑定位置错误 #

你在<toggle-button>标签上绑定了ng-click="$ctrl.liveAction()"，但组件内部的<button>才是实际的点击目标，它已经有自己的ng-click事件了。这种情况下，点击按钮会优先触发组件内部的事件，父组件的点击事件可能因为事件冒泡被拦截或优先级问题无法触发。

正确实现方案 #

我们需要让组件通过标准绑定接收父组件的点击回调，同时确保双向绑定的文本能正常更新：

1. 修改组件定义（toggle-button.component.js）

添加点击回调的绑定，并实现组件内部的点击方法来触发父回调：

angular.module('cxvr')
.component('toggleButton', {
    require: {},
    bindings: { 
        text: '=', 
        obj: '=',
        onClick: '&' // 添加点击回调的绑定，用于触发父组件方法
    },
    transclude: true,
    templateUrl: template,
    controller: function ($scope, $element) { 
        // 实现组件内部的点击方法，触发父组件传递的回调
        this.toggleAction = function() {
            this.onClick();
        };
    }
});

2. 修正组件模板的拼写错误（toggle-button.template.html）

把错误的toggleActionn()改成正确的toggleAction()：

<button class="toggle-button" ng-click="$ctrl.toggleAction()">
<span class="theme-floating-button-img"></span>{{$ctrl.text}}
</button>

3. 修改页面中组件的使用方式

将父组件的liveAction通过on-click绑定传递给组件，替代原来在标签上直接加ng-click的写法：

<toggle-button class="live" obj="$ctrl.obj" text="$ctrl.text" on-click="$ctrl.liveAction()">
</toggle-button>

4. 确认父控制器逻辑

你的父控制器逻辑本身是正确的：当liveAction被触发时，$ctrl.text会被修改，由于组件的text是双向绑定（=），组件会自动同步更新按钮上的文本。

额外提示 #

• 使用&绑定传递回调是AngularJS组件中父子组件通信的标准方式，能保证子组件安全触发父组件的方法。
• 确保组件所在的cxvr模块和父控制器所在的consumerServiceApp模块已经正确建立依赖关系，否则组件无法正常初始化。

这样修改后，点击按钮就会触发父组件的liveAction方法，按钮文本也会实时更新为zzz了。

内容的提问来源于stack exchange，提问作者Anna