Question

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

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

圆形按钮的模板代码：

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

圆形按钮组件定义代码：

components.component('circularButton', {
    bindings: {
        onClick: '&',
        config: '<'
    },
    templateUrl: '/views/components/photos-circular-button.html'
});

“计数器按钮”组件的模板代码：

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

它的组件定义代码：

components.component('counterButton', {
    bindings: {
        onButtonClick: '&',
        counter: '<',
        buttonConfig: '<'
    },
    templateUrl: '/views/components/photos-counter-button.html',
    controller: function () {
        var ctrl = this;
        ctrl.disabled = false;
        ctrl.action = function () {
            ctrl.counter++;
            ctrl.onButtonClick();
        }
    }
});

所以这一切的基本行为是当你点击按钮时，计数器以1递增。现在，父组件“counter-button”传递一个函数，当用户点击该按钮时执行圆形按钮，使用如下的绑定属性：

onClick: '&'

这样父组件会注入要调用的函数。我在这里按照Angular组件文档做了这个：

https://docs.angularjs.org/guide/component

在“组件树示例”部分。

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

为此，我尝试将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();
    }
}

但这不起作用，因为ng-directive在逻辑上应用于<circular-button></circular-button>元素，而不是应用于其中的按钮。

所以让我们说，如果我不想添加另一个绑定到圆形按钮的变量谁将禁用按钮，因为我想保持圆形按钮尽可能通用，我怎么能禁用父组件（或圆形按钮的任何客户端）使用它的按钮？

也许我没有对这种情况采取正确的方法，如果你认为可以通过其他任何方式做得更好，我会非常乐意尝试。先谢谢你们！

Answer 1

这并没有完全级联ng-disabled，但我试图解决我遇到的类似问题时遇到了你的问题。我基本上在＆＃34; isDisabled＆＃34;的每个组件中创建了可绑定属性。标志。

等组件

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>

以下是一个实例：https://embed.plnkr.co/2gbAGd1PM9Gx5rslXChB/

将ng-disabled应用于子组件的组件

1 个答案: