0

我正在尝试使用一个表单按钮，上面写着Save要更改为Saving...在忙碌时更改。如果这可以检测到这里有一个 ng-click 指令并且只在busy为 false 时触发该指令，那就太棒了。我需要为此创建一个新指令，还是有办法只利用 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);
            }
        }
    }
})
4

1 回答 1

1

我会这样做：

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

where isBusy 可以只是一个布尔值，您在处理/等时正在更改您的范围（或我猜的函数）。这不需要指令并将措辞保留在标记中。您可能可以将其扩展到为字符串/等提供服务或常量，但这仅取决于您想要走多远。

** 更新 **

如果您想根据其中一条评论绑定 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>
于 2013-07-01T20:23:12.977 回答