Детский шаблон директива не обновляется после изменения области видимости

Question

У меня есть пользовательские директивы с детьми директивы:

<rp-nav> 
    <rp-nav-item cat="1"></rp-nav-item> 
    <rp-nav-item cat="2"></rp-nav-item> 
    <rp-nav-item cat="3"></rp-nav-item> 
    <rp-nav-item cat="4"></rp-nav-item> 

    <rp-flyout></rp-flyout> 
</rp-nav> 

Вот модули ввода определили:

var app = angular.module('app', []); 

app.directive('rpNav', function() { 
    return { 
     restrict: 'E', 
     controller: function($scope) { 
      $scope.currentItem = 'none'; //initialize currentItem 
      this.setCurrentItem = function(itemId) { 
       $scope.currentItem = itemId; 
      } 
     }, 
    }; 
}); 

app.directive('rpNavItem', function() { 
    return { 
     restrict: 'E', 
     template: function(el, attrs) { 
      return '<p>item {{currentItem}} ' + attrs.cat; 
     }, 
     require: '^rpNav', 

     link: function(scope, el, attrs, nav) { 
      el.on('click', function() { 
       nav.setCurrentItem(attrs.cat); 
      }); 
     } 
    }; 
}); 

app.directive('rpFlyout', function() { 
    return { 
     restrict: 'E', 
     template: '<p style="background-color: lightblue">{{currentItem}}</p>' 
    }; 
}); 

Идея заключается в том, чтобы нажать на любой из элементы и изображение элемента rp-flyout отображает информацию о щелчке rp-nav-item. Переменная области currentItem меняется при нажатии, но шаблон в rp-flyout не обновляется. Что мне не хватает для достижения этой цели? И, это «лучший способ» решения этой проблемы.

Вот plunker

Answer 1

Чтобы расширить комментарий, директивы не являются по сути частью цикла дайджеста, поэтому вам нужно добавить scope.$apply() внутри el.click обработчика для запуска цикла дайджеста и привязок шаблона обновления.

el.on('click', function() { 
    nav.setCurrentItem(attrs.cat); 
    scope.$apply(); 
});