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字段，这将使其动态化。像<my-directive sort = 'Username'></my-directive>之类的东西我在主控制器中初始化了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>

创建动态角度指令

2 个答案: