Question

我正在尝试使用表示Save的表单按钮，以便在忙碌时更改为Saving...。如果这可以检测到此处存在ng-click指令并且仅在busy为假时才触发该指令，那将是非常棒的。我是否需要为此创建一个新指令，或者是否有办法只使用ng-click的功能？

HTML：

<button-large color="green" ng-click="createWorkstation()" busy="disableSave()" busyLabel="Saving...">Save</button-large>

JS：

directive('buttonLarge', function () {
    return {
        scope: {
            busy: '&'
        },
        replace: true,
        restrict: 'E',
        transclude: true,
        template: '<button type="checkbox" class="buttonL" ng-transclude/>',
        link: function (scope, element, attrs) {
            var config = {
                color: "Default"
            };

            angular.extend(config, attrs);

            element.addClass("b"+capitalize(config.color));

            //when the button is busy, disable the button
            scope.$watch(attrs.busy, function () {
                console.log('changed', scope.busy);
            });

            //capitalize first letter of string
            function capitalize(s) {
                return s[0].toUpperCase() + s.slice(1);
            }
        }
    }
})

Answer 1

我就是这样做的：

<button ng-click="createWorkstation()">{{isBusy && "Saving" || "Save"}} </button>

在处理/ etc时，isBusy可能只是一个布尔值，您正在更改范围（或我猜的函数）。这不需要指令并将标记保留在标记中。您可以将此扩展为为字符串/ etc提供服务或常量，但这取决于您想要接受它的距离。

**更新**

如果你想根据其中一条评论绑定html，你可以使用ng-bind-html-unsafe指令：

<button ng-click="go()" ng-bind-html-unsafe="isBusy && '<span class=icol-refresh></span><span>Saving...</span>' || 'Save'">Process</button>

如何覆盖ng-click功能

1 个答案: