jquery - Angular Directive解析attr双向绑定(bind)

Question

我正在创建一个名为 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);
            });
        }
    }
}]);

Answer 1

你需要在指令上隔离范围，像这样(未测试):

.directive('evoEventMirror', function ($parse) {
    return {
        restrict: 'A',
        scope: {
            'action': '='
        },
        link: function (scope, element, attrs) {
            console.log(scope.action);            
        }
    }
});

您可以阅读的一个很好的指南是 here