Question

我正在创建一个名为evoEventMirror的角度指令，其目的是将一个jquery事件附加到一个插入的元素，并将指定的css样式应用于“root”元素。见下面的例子：

<div id="#mydiv" evo-event-mirror target="#otherdiv" event="transitionEnd" action="hideMenu == true ? {'border':'1px solid blue'} : {'border':'1px solid red'}">
       <!--...-->
</div>

在这种情况下，#otherdiv将绑定transitionEnd事件，并在触发事件时将边框样式（action）应用于#mydiv。

现在，问题是我无法创建一个孤立的范围，所以我无法获得双重绑定变量。我试图使用元素的属性作为输入源，但如果变量“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

不确定，但我认为手表在这里用处不大，因为test不是范围变量。

你可以做的是创建一个这样的监视功能：

            var getter = $parse(attrs.action);
            scope.$watch(function() {
                             return getter(scope);
                         }, 
                        function (newValue) {
                                 console.log('update');
                        });

这个监视功能（第一个参数）现在每次都在摘要周期中触发。试试吧。

Answer 2

你需要在指令上使用隔离范围，类似这样（未经测试）：

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

您可以阅读的好指南是here

Answer 3

我成功解决了我的问题。问题是“hidemenu”变量本身：它存储在一个独立的范围内，因此我引用了一个“新的”变量hidemenu，每次都是假的。

然而，使用正常的观察者来对准attrs就可以了。

无论如何，谢谢你的回答。

Angular Directive解析了attr双向绑定

3 个答案: