Question

我一直在试图绕过这个而没有太大的成功。我想创建一个可以应用于按钮的指令。所有它应该做的是向按钮内容添加进度指示器元素，在按钮上设置/取消设置类并切换禁用。

这是我要创建的结果按钮：

<button type="submit" 
    ng-click="save()" 
    class="btn btn-default" 
    ng-class="{spinning: saving}" 
    ng-disabled="saving">
    Save
    <span class="spinner"><i class="icon-spin icon-spinner"></i></span>
</button>

这就是我想用指令按预期工作的内容：

<button type="submit" 
    ng-click="save()" 
    class="btn btn-default" 
    spinning-button spinning="saving">
    Save
</button>

我认为使用指令这应该很容易，但到目前为止我没有得到任何令人满意的结果。看到这个小提琴：http://jsfiddle.net/4Y5NF/。它现在正在工作，但指令的范围属性spinning在控制器的范围内可用，因为该指令没有范围。如果我给指令一个范围，ng-click不再起作用，因为它应用于指令的范围而不是控制器的范围。

关于如何解决的任何想法？

Answer 1

好吧，这似乎是不可能的 - 而且在我的狭窄用例中也没有必要，虽然它会很好......谢谢KayakDave澄清。这个也很有用：AngularJS - ngClick, custom directive, and isolated scope issue。

我最终得到了这个指令：

.directive('spinnerButton', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.addClass("has-spinner");
            element.append(' <span class="spinner"><i class="icon-spin icon-spinner"></i></span>');

            scope.$watch(attrs.spinnerButton, function(value) {
                element.toggleClass("spinning", value);
            });
        }
    };
}])

和这个HTML使用指令：

<button type="submit" ng-click="signUp()" class="btn btn-default"
    spinner-button="signupInProgress" ng-disabled="loginInProgress">
    Sign up
</button>

它按原样按钮，并在按钮标题的末尾添加has-spinner类和内部<span>。

我使用的CSS基于http://jsfiddle.net/AndrewDryga/GY6LC/

中的https://stackoverflow.com/a/15988830/61478

Answer 2

两件事。

1-在您的指令spinning="saveOngoing"中，attrs.spinning等于saveOngoing。因此，attrs.scope上的$ watch会导致saveOngoing上的观看。使用隔离范围后saveOngoing不可见。您更愿意观看spinning，因为这是您带入范围的内容。

请切换$watch：

scope.$watch(attrs.spinning, function(value) {..})

到

scope.$watch('spinning', function(value) {..})

以下是您的小提琴：http://jsfiddle.net/4Y5NF/2/

当您点击按钮时，您会看到手表已被触发。

2-这一行：

<p>Spinning (from the directive scope): {{spinning}}</p>

不适用于隔离范围，因为只有具有隔离范围的DOM元素才能看到spinning。 spinning="saveOngoing"正在设置一个关联，这样在指令中变量被称为spinning，而在控制器范围内，它被称为saveOngoing。

因此，由于<p>超出了指令的隔离范围，因此它对spinning一无所知。

没有隔离范围spinning="saveOngoing"在父范围内创建第二个变量。因此，您最终会得到两个变量saveOngoing和spinning（这就是为什么该行在您的非隔离范围示例中有效）。

AngularJS指令扩展/扩充它所应用的元素

2 个答案: