AngularJS指令擴展/增強它在

我一直在試圖總結我解決這個頭沒有多少成功應用的元素。我想創建一個可應用於按鈕的指令。它應該做的就是在按鈕內容中添加一個進度指示器元素，在按鈕上設置/取消設置一個類並切換ng-disabled。AngularJS指令擴展/增強它在

這是導致按鈕，我想創建：

<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不再適用，因爲它適用於指令的範圍而不是控制器的範圍。

如何解決任何想法？

來源

2013-11-26 Stefan Henze

好了，這似乎是不可能的 - 在我狹窄的使用情況下，也沒有必要，但它本來不錯...謝謝你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

來源

2013-12-06 16:07:16

嗨，我只是看着這個指令只是好奇什麼是signupInProgress？謝謝 – Gayan

'signupInProgress'只是一個在控制器中聲明的變量，用於確定是否將類'spinning'應用於按鈕（請參閱JS部分中的'watch'調用） –

兩件事情。

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（這就是爲什麼該行在你的非孤立範圍的例子）。

來源

2013-11-27 01:19:36 KayakDave

謝謝。我正在玩的關於1的不同選項。我猜真正的踢球者是2.所以不可能有一個指令訪問它自己的隔離範圍，也有其他屬性/指令訪問控制器或父範圍？ –

AngularJS指令擴展/增強它在

回答

相關問題