J'ai créé une directive simple mais pour le moment je n'ai pas de portée définie. Cependant, je veux que la directive utilise une portée isolée pour que je puisse la réutiliser facilement.
C'est mon html et la directive s'appelle "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>
J'ai gardé l'exemple court donc la seule chose qu'il fait ici est de changer la classe "menuHour après" en "menuHour avant".
Il le fait avec une méthode "changeToBefore ()".
Ceci est ma 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")
}
}
}
})
Comment puis-je changer cela en une directive de portée isolée?
THX,
Réponses:
1 pour la réponse № 1Vous pouvez définir un portée isolée avec scope: {}:
J'utiliserais également $ element au lieu de récupérer l'élément à nouveau!
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")
}
}
}
})