Convert a directive to use isolated scope

Question

I have created a simple directive but at the moment i don't have any scope set. However i want the directive to use isolated scope so that i can easily reuse it.

This is my html and the directive is called "select-time":

<div class="menuHour after" select-time><div class="menuHour-panel before"><span class="menuHour-panel-title" ng-click="changeToBefore()">Before 12h</span></div>

I have kept the example short so the only thing it's doing here is changing the class "menuHour after" to "menuHour before".

It's doing that with a method "changeToBefore()".

This is my directive:

angular.module("tiki").directive("selectTime", function(newTiki){ return { restrict:"A", controller:function($scope, $element, $attrs){ $scope.changeToBefore = function(){ var menuHour = document.querySelector(".menuHour") menuHour.classList.remove("after") menuHour.classList.add("before") } } }

})

How can i change this to an isolated scope directive?

Thx,

Betty St · Accepted Answer · 2015-02-27 12:02:49Z

1

You can define an isolated scope with scope: {}:

I would also use $element instead of getting the element again!

angular.module("tiki").directive("selectTime", function(newTiki){ return { restrict:"A", scope: {}, templateUrl: '/path/to/directive.html', controller:function($scope, $element, $attrs){ $scope.changeToBefore = function(){ $element.removeClass("after") $element.addClass("before") } } } })

edited Feb 27, 2015 at 12:02

answered Feb 27, 2015 at 11:09

Betty St

2,91024 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kevinius Over a year ago

This doesn't work, i think it's because the html code is not in a template (templateUrl: ... or template: "..") no?

Jeff Whelpley Over a year ago

fyi, you mis-spelled $element

kevinius Over a year ago

Ok, just tried it out and indeed you have to create a templateUrl and link to the template for the isolated scope to work. To bad though, because now i have another http request that i think should not be needed.

Betty St Over a year ago

you can also define your HTML with template inside the directive code, instead of using tempalteUrl

kevinius Over a year ago

Yes, but that's not very fun if you have to change the html, especially if you have a big directive.

|

Collectives™ on Stack Overflow

Convert a directive to use isolated scope

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related