Перетворіть директиву на використання ізольованого об'єму - angularjs, angularjs-directive

Я створив просту директиву, але на даний момент я не маю жодної області застосування. Однак я хочу, щоб директива використовувала окрему область, щоб я могла легко використовувати її повторно.

Це мій html, і директива називається "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>

Я тримав приклад короткий, тому єдине, що він робить тут - це зміна класу "menuHour after" на "menuHour раніше".

Це робимо з методом "changeToBefore ()".

Це моя директива:

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

}

}

}

})

Як я можу змінити це на директиву про окрему область застосування?

Дякую,

Відповіді:

Ви можете визначити ізольований обсяг з scope: {}:

Я також використовував би елемент $ замість того, щоб отримувати елемент знову!

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

}

}

}
})