Преобразование директивы для использования изолированной области

Question

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

Это мой HTML и директива называется «выбора времени»:

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

Я сохранил пример коротка, поэтому единственное, что он делает здесь меняется класс «menuHour после того, как» до «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") 

     } 

    } 

} 

})

Как я могу изменить это директивы изолированной области видимости?

Thx,

Answer 1

Вы можете определить isolated scope с 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") 

     } 

     } 

    } 
})