兒童指令模板沒有更新

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。範圍變量當前項目確實在點擊時發生變化，但rp-flyout中的模板未更新。我錯過了什麼來實現這個目標？而且，這是解決這個問題的「最佳實踐」方式嗎？

這裏有一個plunker

Answer 1

要在評論擴大，指令是消化週期不是天生的一部分，所以你需要添加scope.$apply()您el.click處理程序中引發消化週期和更新模板綁定。

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