2014-01-10 42 views
1

對於給定的HTML元素,您可以定義指令鏈接的順序,而不用在指令中硬編碼priority以允許獨立的指令鏈接?在AngularJS中,你可以用每個元素的不同定義順序鏈接屬性指令事件嗎?

例子:

假設給定元素的點擊,我們要

  1. 檢查,如果用戶進行身份驗證
  2. 日誌的行爲
  3. 加載數據
  4. 提交表單。

但是,步驟1-4都是單一職責,彼此之間沒有任何知識。第4步,在一般情況下,不依賴於步驟1-3,所以下面都是有效的按鈕:

<button check-user-is-authenticated log-some-action load-new-data submit-form></button> 
<button submit-form log-some-action></button> 
<button check-user-is-authenticated submit-form></button> 

但是,各個按鈕知道的指令都應該在運行的順序:爲<button submit-form log-some-action></button>,我們想提交表格然後記錄數據。

checkUserIsAuthenticated指令的示例。其他指令是相似的。

MyApp.directive('checkUserIsAuthenticated', ['app', (app) -> 
    { 
    restrict: 'A', 
    link: (scope, element, attrs) -> 
     element.bind("click", (event) -> 
     if(app.authenticated) 
      #continue running directives 
      true 
     else 
      #Go and authenticate then continue with any other directives 
      app.goAuthenticate() 
    ) 
    } 
]) 

大多數指令不依賴於電流控制器/範圍,所以在使用的控制器來處理這將增加很多重複的代碼在整個應用程序的多個控制器。

+3

你綁定將過程邏輯轉化爲HTML,我認爲這不是最好的方法。我敢打賭,由於這個原因,這個問題沒有簡單的解決方案:它並不意味着以這種方式工作。將程序指令的邏輯公開爲服務並從例如每個按鈕一個專用控制器。 –

+0

每條指令鏈接到它自己的服務/控制器,但整體按鈕特定的單個控制器不是一個明智的選擇。假設有10個不同的頁面和他們自己的控制器可以打開相機。在兩個獨立的服務中添加'

回答

0

只是一個爲您解決問題的方式:

編寫處理click事件,並調用提供的服務方法指令:

<button chained-actions="a:b:c">Action a b c</button> 

MODUL確定指標:

angular.module('myApp', []) 

.factory('a', function($http){ 
    return function(){ 
    console.log('A'); 
    } 
}) 

.factory('b', function($http){ 
    return function(){ 
    console.log('B'); 
    } 
}) 

.factory('c', function($http){ 
    return function(){ 
    console.log('C'); 
    } 
}) 

.directive('chainedActions', function($injector){ 
    return function($scope, $element, $attr){ 
     $element.on('click', function(){ 
     $scope.$apply(function(){ 
     var actions = $attr.chainedActions.split(':') 
     angular.forEach(actions, function(action){ 
      var actionServie = $injector.get(action); 
      actionServie(); 
     }); 
     }); 
    }); 
    }; 
}) 
; 

這裏是強盜http://plnkr.co/edit/jpRIAhZWHrEBcN2mBieb?p=info

相關問題