Угловая директива parsed attr двусторонняя привязка

Question

Я создаю угловую директиву evoEventMirror, целью которой является прикрепить событие 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 будет связывать transitionEnd событие и применить стиль границы (действия) в #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

Я успешно решена моя проблема. Проблема заключалась в самой переменной «hidemenu»: она хранилась в изолированном объеме, поэтому я ссылался на «новую» переменную hidemenu, которая была каждый раз ложной.

Спасибо за ответы, во всяком случае.

Answer 2

Не уверен, но я считаю, что часы не намного использовать здесь, как test не является переменной сфера.

Что вы можете сделать, это создать функцию часов, как это:

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

Эти часы функции (первый аргумент) Теперь огонь каждый раз на дайджест цикла. Попробуй.

Answer 3

Вам необходимо изолировать сферу на директивы, что-то вроде этого (не проверено):

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

Хороший гид вы можете прочитать это here