Обновить данные в угловой директиве

Question

У меня возникла проблема с получением данных, которые я передаю в свою директиву для обновления при обновлении DOM. В этой директиве выделяется активная вкладка в sidenav в зависимости от того, где они прокручиваются на странице. Вот fiddle example того, что я сделал.

На моем местном сайте есть большие разделы, которые условно показывают или скрывают, и пользователь может & может часто меняться. Таким образом, это изменит положение идентификаторов элементов, которые я сохранил в resultsSections. Когда позиции меняются, они не обновляются в директиве.

<script type="text/javascript"> 
$scope.getResultsSectionPosition = function() { 
    var resultsSections = {}; 
    $('.results-heading').each(function() { 
     resultsSections[this.parentNode.id] = $(this).offset().top; 
    }); 
    console.log(resultsSections); 
    return $scope.resultsSections = resultsSections; 
} 
$scope.getResultsSectionPosition(); 
</script> 

Я реинициализирована локальный сайт, вызвав $scope.getResultsSectionPosition() - новые сдвиги сохраняются в resultsSections, но директива по-прежнему имеет начальное значение. Как заставить директиву использовать наиболее активные данные?

myApp.directive('navActive', function() { 
return function(scope, element, attrs) { 

     var height = $(window).height(), 
      section = 0; 
     $(window).bind("scroll", function() { 
      var position = $(this).scrollTop(); 
      for (section in scope.resultsSections) { 
       if (position + height - 50 >= scope.resultsSections[section]) { 
        $('li').removeClass('results-nav-active'); 
        $('#nav_' + section).addClass('results-nav-active'); 
       }; 
      }; 
     }); 
    }; 
}) 

Я попытался использованияКонтактная scope.$watch('resultsSections", function(){...}), но не увенчались успехом с этим.

Answer 1

вы должны ба в состоянии использовать $ часов, но вы также можете использовать атрибут изолят области действия, а затем передать свой Controlle переменного $ области действий непосредственно к директиве

Я подправил немного ваш код, и я добавил некоторые консоли. войдите, чтобы узнать, что происходит, вы можете увидеть его здесь. http://jsfiddle.net/DotDotDot/uC2dP/14/

Я добавил кнопку сверху, чтобы изменить модификацию позиций, чтобы увидеть последствия в директиве, а в директиве я добавил console.log() с позициями, называемыми прокруткой. Кроме того, ваша директива теперь изолированную сферу, с resultsSections переплетены параметру, указанному в HTML

return { 
    scope:{resultsSections:"=sections"}, 
    link:function(scope, element, attrs) { 


    var height = $(window).height(), 
     section = 0; 
    $(window).bind("scroll", function() { 
     var position = $(this).scrollTop(); 
     console.log(scope.resultsSections) 
     for (section in scope.resultsSections) { 
      if (position + height - 50 >= scope.resultsSections[section]) { 
       $('li').removeClass('results-nav-active'); 
       $('#nav_' + section).addClass('results-nav-active'); 
      }; 
     }; 
    }); 
} 
} 

и в HTML:

<section nav-active sections="resultsSections"> 

Вы можете увидеть, если нажать на кнопку, то прокрутки, позиции в директиве корректно обновляются

весело