javascript - 如何附加按钮的值然后将其改回

Question

我想向任何按钮添加一个指令，用单词 loading 替换按钮值。然后以某种方式有一个函数，当我在我的代码中的任何地方调用该函数时(比如在 ajax 加载之后)，该函数将恢复按钮的值。

我想知道如何在 AngularJS 中完成此操作。

首先，我想我创建了一个指令...

.directive('spinnerButton', function () {
    return {
        restrict: 'A',

        link: function (scope, element, attrs) {
            element.bind('click', clickedButton);

            function clickedButton() {
               //get button change  add the words loading...
            }
        }
    }
});

在我的按钮上作为指令...

  <div ng-click="loadsomething()" spinner-button>All Projects</div>

然后以某种方式记忆起说“恢复原状”的冲动......

等等

.then(function (objects) {
                        //remove loading message

                    },

Answer 1

您可以为指令和外部范围共享的 loading 属性使用两种方式的数据绑定(bind)。单击该元素时，将 loading 设置为 true。加载完成后，在外部范围(例如 loadsomething)中将 loading 设置为 false。

您可以使用嵌入来更改按钮显示的内容。

return {
    restrict: "A",
    transclude: true,
    template: "<div ng-transclude ng-hide=loading></div>"
        + "<img ng-show=loading src=throbber.gif>",
    scope: {loading: "=spinnerButton"},
    link: function (scope, elem) {
        elem.bind("click", function () { scope.loading = true; });
    }
};

<div ng-click="loadsomething()" spinner-button=loading>All Projects</div>

http://jsfiddle.net/Loq0sm5w/