Javascript 将ng禁用应用于子组件的组件

我正在学习AngularJSV1.5，我正在做一些组件实验。我设计了两个组件：

• 一个圆形按钮，称为“圆形按钮”
• 包装圆形按钮和文本字段的组件，称为“计数器按钮”。在我的示例中，该组件用于显示圆形按钮旁边的计数器。这就像youtube上的“喜欢”或“不喜欢”按钮

圆形按钮的模板代码：

<button
    class="circular-button {{ $ctrl.config.color }}"
    ng-click="$ctrl.onClick()">
    {{ $ctrl.config.text }}
</button>

这样，父组件将注入要调用的函数。我是按照此处的角度组件文档进行此操作的：

在“组件树示例”一节中

到目前为止没有问题，一切都很好。但是现在我想向组件添加更多功能，我希望当用户单击圆形按钮时禁用它，因此一个用户只能增加计数器一次。再一次，比如youtube视频上的“喜欢”按钮

为此，我尝试将ng disabled指令添加到计数器按钮模板中，如下所示：

onClick: '&'

<span>
    <circular-button
        config="$ctrl.buttonConfig"
        on-click="$ctrl.action()" ng-disabled="$ctrl.disabled"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>

但这不起作用，因为ng指令在逻辑上应用于

元素，而不是它内部的按钮

比如说，如果我不想用变量为循环按钮添加另一个绑定，谁将禁用按钮，因为我想让循环按钮尽可能通用，那么我该如何从使用它的父组件（或循环按钮的任何客户端）禁用按钮呢

也许我没有正确的方法来处理这种情况，如果你认为这可以做得更好，我会非常乐意尝试。提前谢谢各位

这并不是将禁用的ng级联，但我在试图解决我遇到的类似问题时遇到了你的问题。我基本上在每个组件中为“isDisabled”标志创建了可绑定属性

组件式

app.component('outerComponent', {
  controller: (function() {
    function OuterController() { this.myOuterDisabledProperty = false }
    return OuterController;
  })(),
  templateUrl: 'outerComponent.html',
  bindings: { myOuterDisabledProperty: '=' }
});

app.component('innerComponent', {
  controller:(function() {
    function InnerController() { this.myInnerDisabledProperty = false }
    return InnerController;
  })(),
  templateUrl: 'innerComponent.html',
  bindings: { myInnerDisabledProperty: '=' }
});

…和模板一样

<div style="background-color: #eee; padding: 10px">
 <h2>Outer Component - disabled: {{$ctrl.myOuterDisabledProperty}}</h2>
 <inner-component my-inner-disabled-property="$ctrl.myOuterDisabledProperty"></inner-component>
</div>

外部组件-已禁用：{{$ctrl.MyOutDisabledProperty}

---

这里有一个活生生的例子：

我不相信ng disabled属性可以像那样层叠下来。您必须从组件中禁用要单独禁用的控件位。换句话说，在你上面的例子中，你必须把它设置在。

<span>
    <circular-button
        config="$ctrl.buttonConfig"
        on-click="$ctrl.action()" ng-disabled="$ctrl.disabled"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>

controller: function () {
    var ctrl = this;
    ctrl.disabled = false;
    ctrl.action = function () {
        ctrl.counter++;
        ctrl.disabled = true; //NEW LINE OF CODE.
        ctrl.onButtonClick();
    }
}

app.component('outerComponent', {
  controller: (function() {
    function OuterController() { this.myOuterDisabledProperty = false }
    return OuterController;
  })(),
  templateUrl: 'outerComponent.html',
  bindings: { myOuterDisabledProperty: '=' }
});

app.component('innerComponent', {
  controller:(function() {
    function InnerController() { this.myInnerDisabledProperty = false }
    return InnerController;
  })(),
  templateUrl: 'innerComponent.html',
  bindings: { myInnerDisabledProperty: '=' }
});

<div style="background-color: #eee; padding: 10px">
 <h2>Outer Component - disabled: {{$ctrl.myOuterDisabledProperty}}</h2>
 <inner-component my-inner-disabled-property="$ctrl.myOuterDisabledProperty"></inner-component>
</div>