我正在创建一个名为 evoEventMirror 的 Angular Directive(指令),其目的是将 jquery 事件附加到插入的元素并将指定的 css 样式应用于“根”元素。 请参见下面的示例:
<div id="#mydiv" evo-event-mirror target="#otherdiv" event="transitionEnd" action="hideMenu == true ? {'border':'1px solid blue'} : {'border':'1px solid red'}">
<!--...-->
</div>
在这种情况下,#otherdiv 将绑定(bind) transitionEnd 事件并在事件触发时将边框样式(action)应用于#mydiv。
现在,问题是我无法创建独立作用域,因此我无法获得双重绑定(bind)变量。 我尝试使用元素的属性作为输入源,但如果变量“hidemenu”发生变化,我无法拦截任何变化。
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');
});
//apply some style..
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);
});
}
}
}]);
最佳答案
你需要在指令上隔离范围,像这样(未测试):
.directive('evoEventMirror', function ($parse) {
return {
restrict: 'A',
scope: {
'action': '='
},
link: function (scope, element, attrs) {
console.log(scope.action);
}
}
});
您可以阅读的一个很好的指南是 here
关于jquery - Angular Directive解析attr双向绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31312818/