Create a Dynamic Angular Directive

Question

I have a html snippet that I'm now having to duplicate a lot which brings me to my question as I'd like to make the html snippet into a directive that can be reused. I'd like to transform the snippet below into a directive.

 <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>

What I'd like is a directive that allows me to pass any string property to the orderBy field which would make it dynamic. so something like <my-directive sort = 'Username'></my-directive> I have vm.orderBy = '' initialised in my main controller.

What have you tried so far? What version of angularjs are you using? Maybe better to use component instead of directive for this purpose? Have you tried looking into docs? There are a lot of examples how to use templates with directives/components; SO is not a resource for a free code writing (but you are just asking to write a directive for you), so you should make a minimal research first and provide some more information, before asking this. — Stanislav Kvitash
– Stanislav Kvitash, Commented Jun 8, 2017 at 9:59
@ Stanislav as you probably can see , I answered my own question on a second look. I do not need a lesson on how SO works I've been here for a good minute. And just as a side note SO is not for people who want to go off on a power trip . There are better ways to pass your point across and not make assumptions that you are not sure of. Thank you . — lacoder
– lacoder, Commented Jun 8, 2017 at 10:33

Ram_T · Accepted Answer · 2017-06-08 10:10:33Z

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>

Then use

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

lacoder · Accepted Answer · 2017-06-08 10:22:25Z

I was able to sort this after all.

.directive("myDirective", function () { return { scope:{prop:'@'}, templateUrl:'/templates/Sorter.html' } });

and the html like this.

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

Collectives™ on Stack Overflow

Create a Dynamic Angular Directive

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related