通过指令表达式继承方法

Question

我正在尝试创建一个具有"加载"状态的可重用按钮指令.也就是说,单击它时会禁用自身并显示内嵌图像以表示加载,然后在完成时将其删除.我这样做是通过在click方法中设置一个范围变量并取消设置它来改变按钮的状态.

我想要点击它在父作用域中时调用的方法,并且我还希望它挂钩到父作用域的验证,因此当父表单无效时它会自动禁用它.这些是我开始工作有困难的部分 - 我知道我的问题与范围有关,但我被困住了.

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

我希望做类似下面的事情,但是如何绑定在指令实例上声明的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
}

编辑:

这是一个小提琴

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";

            }
        });

。

该小提琴反映了基于您的设置的工作示例，并使用$timeout.