Erstellen einer dynamischen Winkeldirektive

Question

Ich habe ein HTML-Snippet, das ich jetzt viel duplizieren muss, was mich zu meiner Frage bringt, da ich das HTML-Snippet in eine Direktive machen möchte, die wiederverwendet werden kann. Ich möchte das Snippet unten in eine Direktive umwandeln.

Was ich möchte, ist eine Direktive, die es mir erlaubt, eine String-Eigenschaft an das OrderBy-Feld zu übergeben, die es dynamisch machen würde. so etwas wie <my-directive sort = 'Username'></my-directive> Ich habe vm.orderBy = '' in meinem Hauptcontroller initialisiert.

Answer 1

angular.module('app_name', []).directive('myDirective', myDirective); 

myDirective.$inject = ["$scope"]; // dependecny injection 

function myDirective($scope) { 
    return { 
     restrict: 'E', 
     templateUrl: 'mydir.tmpl.html', 
     scope: { 
      sort: "@" 
     } 
    } 
} 

mydir.tmpl.html

<a href="#" ng-click="vm.orderBy=sort; reverseSort = !reverseSort"> 
      User Name 
      <span ng-show="vm.orderBy == sort"> 
       <span ng-show="!reverseSort"> 
        <i class="fa fa-sort-alpha-asc"></i> 
       </span> 
       <span ng-show="reverseSort"> 
        <i class="fa fa-sort-alpha-desc"></i> 
       </span> 
      </span> 
    </a> 

verwenden Dann

<my-directive sort = 'Username'></my-directive>

Answer 2

ich in der Lage war, das alles nach sortieren.

.directive("myDirective", function() { 

     return { 
      scope:{prop:'@'}, 
      templateUrl:'/templates/Sorter.html' 

     } 

    }); 

und die html so.

<my-directive prop="UserName"></my-directive>