Javascript 通过指令表达式继承方法

我正在尝试创建一个具有“加载”状态的可重用按钮指令。也就是说，当单击时，它将禁用自身并显示一个内联图像以表示加载，完成后将删除该图像。我通过在click方法中设置一个scope变量并取消设置它来实现这一点，这会改变按钮的状态

我希望它在单击时调用的方法位于父作用域中，我还希望它连接到父作用域的验证中，以便在父窗体无效时禁用它自己。这些是我在工作中遇到困难的部分——我知道我的问题与范围有关，但我被卡住了

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

编辑：

这是一把小提琴

---

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

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

并对按钮和图像使用

ng show

和

ng disabled

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

---

反映了一个基于您的设置的工作示例，使用

$timeout

模拟加载时间，代码似乎有一些问题。请设置一个plunker或fiddle演示，以便纠正问题。是否调用ngClick

data ng click=“{{ngClick（）}}”

Ajay-我确实在上面说过代码不起作用，因此这篇文章。我可以制作一个提琴演示，但它仍然不起作用。rGil-恐怕这不起作用，而且我不确定它是否有必要，因为该方法是作为属性传入的，括号已经存在？只是添加了一个不起作用的提琴：-）好的，谢谢。但是，“text”未在隔离作用域中设置，它在指令实例上声明。此外，单击仍会导致错误-请参阅然后您需要

“@”

。另外，请参阅我的答案，了解ng单击。我不会使用名称“ng click”作为属性。谢谢-我想我没有完全理解你说的话！需要做一点改变，以执行禁用状态，但否则，竖起大拇指！再次感谢。

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

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

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

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

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

            }
        });