I have developed a custom Angular Directive known as evoEventMirror. Its main purpose is to attach a jQuery event to an inserted element and apply a specified CSS style to the "root" element. Refer to the example below:
<div id="#mydiv" evo-event-mirror target="#otherdiv" event="transitionEnd" action="hideMenu == true ? {'border':'1px solid blue'} : {'border':'1px solid red'}">
<!--...-->
</div>
In this scenario, #otherdiv will link the transitionEnd event and implement the border style (action) to #mydiv once the event is triggered.
However, my current challenge lies in creating an isolated scope which prevents me from obtaining double-binding variables. Although I attempted to utilize the attributes of the element as an input source, I faced difficulties intercepting any modifications when the variable "hidemenu" changes.
evoDirectives.directive('evoEventMirror', ['$parse',function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var test = $parse(attrs.action)(scope);
scope.$watch(test, function (newValue) {
console.log('update');
});
//applying some styling..
target.bind('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function () {
var css = angular.element(element).attr('style');
if (css == null) css = style;
else css += style;
element.attr('style', css);
});
}
}
}]);