javascript - 通过指令表达式继承方法

Question

我正在尝试创建一个具有“正在加载”状态的可重用按钮指令。也就是说，当单击它时，它会自行禁用并显示一个内联图像来表示加载，然后在完成后将其删除。为此，我在 click 方法中设置了一个范围变量并取消设置，这会更改按钮的状态。

我希望它在单击时调用的方法位于父范围内，我还希望它 Hook 到父范围的验证中，因此当父表单无效时它会自行禁用。这些是我难以开始工作的部分 - 我知道我的问题与范围相关，但我被卡住了。

<loading-button class="login" data-ng-click="login()" text="Login" toggle="loaded"></loading-button>

我希望做类似下面的事情，但是我怎样才能绑定(bind)在指令实例上声明的 click 方法，以便从指令实际调用？或者，这是不好的做法吗？这目前不起作用。

angular.module("App.directives").directive("loadingButton", function () {
return {
    restrict: "E",
    replace: true,
    transclude: true,
    template: '<button data-ng-click="{{ngClick}}">{{text}}<img class="loading" src="images/ButtonLoader.gif" alt=""></button>',
    scope: {
        "toggle": "=",
        "text": "=",
        "ng-disabled": "=",
        "disabled": "=",
        "ngClick": "&"
    },
    link: function(scope, element, attributes) {
        scope.text = attributes.text;
        var expression = attributes.toggle;

        scope.$watch(expression, function(newValue, oldValue) {
            if(newValue === oldValue) {
                return;
            }

            if(newValue) {
                element.removeAttr("disabled");
                element.find("img.loading").hide();
            }
            else {
                element.attr("disabled", "disabled");
                element.find("img.loading").show();
            }
        });
    }
  };
});

在父作用域中这样使用:

$scope.login = function () {
    $scope.loaded = false;  // Disable button and show it loading

    // Do login stuff

    $scope.loaded = true; // Enable button and hide it loading
}

编辑:

这是一个 fiddle

http://jsfiddle.net/jonathanwest/frvk6/2/

Answer 1

编辑 - 最简单的解决方案:如果您所做的只是启用一个按钮并隐藏该按钮中的元素，那么您根本不需要指令:

<button ng-click="login()" ng-disabled="loading"><img ng-show="loading">Login</button>

---

否则，如果您希望在指令中使用它:

对于初学者来说，您不需要在模板中的点击声明中使用 {{}}，您需要调用 ()。

我正在将 属性引用 从 ngClick 更改为 click - angular 不喜欢你使用它的名称作为你的属性:

<button data-ng-click="click()">

并为您的按钮和图像使用 ng-show 和 ng-disabled。

<button ng-click="click()" ng-disabled="text==\'loading\'">
    <img ng-show="text==\'loading\'">{{text}}</button>

.

对于 text 属性，由于您只是读取字符串的值，因此您需要将该范围设置更改为 text: "@"。

此外，由于 toggle 是在您的隔离范围内设置的，因此您可以直接使用 $watch 进行更改。

*请注意，这只是一个基于范围 $watch 禁用和显示元素的示例。您的禁用和显示可能需要与以下值完全相反的值，或者可能取决于不同的范围变量:

scope.$watch('toggle', function(newValue, oldValue) {
            if(newValue === oldValue) {
                return;
            }

            if(newValue) {
                scope.text = "loaded";
               ;
            }
            else {
                scope.text="loading";

            }
        });

.

This fiddle反射(reflect)了一个基于您的设置的工作示例，使用 $timeout 模拟加载时间。