動的な角度指令を作成する

Question

私は今、多くのことを複製しなければならないhtmlスニペットを持っています。これは、HTMLスニペットを再利用可能な指令にしたいと思っています。 以下のスニペットを指示に変換したいと思います。私が好きな何

<a href="#" 
    ng-click="vm.orderBy ='UserName'; reverseSort = !reverseSort"> 
            User Name 
            <span ng-show="vm.orderBy == 'UserName'"> 
             <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> 

は、私はそれがダイナミックになるだろうORDERBYフィールドに任意の文字列プロパティを渡すことができますディレクティブです。 何かのように 私はvm.orderBy = ''私のメインコントローラで初期化しています。

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> 

その後、私はすべての後にこれを並べ替えることができた

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

Answer 2

を使用しています。

.directive("myDirective", function() { 

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

     } 

    }); 

このようなhtmlです。

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