AngularJS創建與變量

可重複使用的指令，我有一個非常簡單的角度只讀指令：AngularJS創建與變量

angular.module('customDirectives', []) 

.directive('ngAvatar', function() { 
    return { 
     restrict: 'A', 
     template: '<a href="#/people/?personId={{ entry.submitted_by }}">' + 
        '<img class="circular" ng-src="{{ entry.submitted_by | getAvatar }}" class="ng-cloak"/>' + 
        '</a>', 
    }; 
});

現在這個工程的具體使用情況而我最初想它。但是現在我想在需要顯示用戶的頭像和個人資料鏈接的任何情況下重新使用它。

當我開始重新考慮我的代碼時，我的html有這個代碼片段，除了變量名稱不同 - 例如{{評論 .submitted_by}}，{{entry。 created_by}}。這些都發生在ng-repeat區塊中，其中也顯示其他信息。

所以，我的問題是，什麼是我的最好的方法來使這個指令可重用和能夠用不同的命名變量功能？我應該重新命名我的變量是一致的（如總是用entry？或者是有一些方法可以讓我延長我的指令，考慮到不同名稱的變量，但同樣的格式。

任何幫助非常讚賞。

來源

2014-03-13 Darwin Tech

通過使用鏈接函數（link：function（scope，element，attrs）{// dostuff};），您可以訪問您的指令所使用的範圍，但是基於您正在尋找的可重用性我會嘗試和標準化你的命名約定。它只是最終在道路上亂成一團。 – trevorc

看起來你想要的是能夠在一個範圍變量的指令通過。這是我會怎麼做。我沒有測試過，但我已經做過類似的事情很多次。

angular.module('customDirectives', []) 

.directive('ngAvatar', function() { 
    return { 
     restrict: 'A', 
     scope: { id: '=ngAvatar'}, 
     template: '<a href="#/people/?personId={{ id }}">' + 
         '<img class="circular" ng-src="{{ id | getAvatar }}" class="ng-cloak"/>' + 
        '</a>' 
    }; 
});

然後在你的html中，你可以通過任何身份證是這樣的

<div ng-avatar='entry.submitted_by'></div>

來源

2014-03-13 18:00:25

很好的回答！這工作得很好。 –

AngularJS創建與變量

回答

相關問題