AngularJS：在指令中使用服務

這是一個angularjs應用程序。我有一個處理內容加載（ajax）的服務。當服務獲取內容時，整個應用程序會隱藏許多內容，然後再次顯示（取決於返回的內容）。他們可能有相同的範圍，不同的範圍，無論如何。他們只需在內容加載時隱藏，然後顯示完成時間。非常普通的東西。AngularJS：在指令中使用服務

現在，我有單獨的控制器看着服務的「加載」屬性，並使用常規的角度指令（ng-show，ng-hide等）來顯示/隱藏。但這感覺像是過度殺傷。我寧願編寫一個自定義的「加載」指令來注入加載服務，並進行觀看和顯示/隱藏。

我的問題是：我想做什麼「壞」？在控制器的方式下，我最終爲一堆代碼做了一些代碼，可能會達到5或6次，或者隨着應用程序的增長甚至更高。自定義指令的方式，我寫一次，並使用我需要它的屬性。是的 - 這種服務有依賴性，但是這並不像是有些人讓我開始認爲我應該這樣認爲的世界末日。

對於什麼是值得的，我覺得我聽到過很多次「關注點分離」，我已經多次被它癱瘓。它導致我過分地藐視所有事情，因爲我想以正確的方式做事，但肯定不覺得我的工作效率很高。

來源

2013-05-31 BjornJohnson

這是切線，但關注點和其他「最佳實踐」的分離旨在幫助您的應用程序更易於更改，推理和測試。所有人都有理由，但不要因爲某人告訴你，或者因爲害怕做錯事而陷入癱瘓狀態而陷入陷阱。同時，不要因爲當時沒有意義而放棄某些東西 - 願意瞭解爲什麼這是一種推薦的做法。有一個平衡點，並記住，最終目標是讓事情變得很酷，並樂在其中！ –

@BrandonTilley - 有蹭。我還不夠熟悉它，知道什麼時候有人告訴我是好的，壞的還是介於兩者之間的。但我很欣賞切線建議和最後一句話！ – BjornJohnson

在我看來，所有依賴這項服務的範圍都應該是一個父範圍的子範圍。如果您的母公司負責與該服務通話，則任何範圍內的任何指令均可通過登錄$scope上的$parent進行訪問。

來源

2013-05-31 14:09:30 MaxWillmo

來自文檔：「範圍被安排在模仿應用程序DOM結構的層次結構中。」所以我一定會看到你在說什麼，但是在某些方面，它也覺得這樣做會倒退 - 比如安排我的應用程序的DOM結構以適應你描述的層次結構。 – BjornJohnson

如果我理解正確，那麼當一個特定的服務加載數據時應該隱藏一堆元素，然後在數據加載時再次顯示它，對嗎？

在這種情況下，事件可能是一個很好的解決方案：

它們可以是全局的appliciation（其中我認爲是你aksing什麼）。
他們允許避免直接耦合之間的元素（也是您的一個擔憂）。

所以，在你的服務，只需廣播事件當事情發生：

$rootScope.$broadcast('loading-data'); 
axajStuffOrWhatever(function() { 
    $rootScope.$broadcast('data-loaded'); 
});

然後包裹在指令將偵聽這些事件顯示/隱藏行爲。

.directive('hideWhileLoadingData', function() { 
    return { 
    link: function(scope, el, attrs) { 
     scope.$on('loading-data', function() { 
     el.css('display', 'none'); 
     }); 
     scope.$on('data-ready', function() { 
     el.css('display', 'block'); 
     });     
    } 
    }; 
});

使用指令：

<div hide-while-loading-data>something</div>

這裏使用事件的好處是，以後，他們可以通過不同的服務發起，或由多個服務，並且該指令將不受此影響，只要事件是相同的。

對於更復雜的行爲，你也可以參數化事件和指令，所以不同的元素會對不同類型的東西做出反應。

我做了一個這樣的example。

來源

2013-05-31 18:50:24 gargc

感謝您的想法。最初，我正在使用這種「$ broadcast/$ on」設置。我甚至像你所描述的那樣將事件參數化。我現在沒有這樣做的原因僅僅是我正在學習所有這些，並且想要嘗試這兩種方式。 :) – BjornJohnson

好，如果你得出一個關於哪種方式更好的結論，你可以用你試過的優點和缺點更新你的問題;） – gargc

確實。但基於我所做過的所有研究，再加上我完全缺乏知識......這將會是六比二十打！ – BjornJohnson

AngularJS：在指令中使用服務

回答

相關問題