ポップオーバーのコンテンツを動的に更新する方法AngularJS Bootstrap

Question

作成時のブートストラップポップオーバーにカスタムAngularJsディレクティブを使用していますが、ポップオーバーポップオーバーのコンテンツを変更できず修正された場合。

app.directive('nextLevel', function() { 
     return { 
      restrict: 'EA', 
      template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}" 
class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>', 
      link: function (scope, el, attrs){ 
       $(el).popover({ 
        trigger: 'click', 
        html: true, 
        toggle:'popover', 
        title: 'notice !!', 
        content: attrs.popoverHtml, 
        placement: 'top' 
       }); 
      } 
     }; 
    }); 

私のHTMLは次のとおりです。

<next-level id='pop' popover-html='{{typeMessage}}'></next-level> 

typeMessageは、ユーザの行動に応じて変更する必要がありますが、それは唯一の最初のメッセージを表示したときにポップオーバー開いて内容を変更していません。

Answer 1

あなたがしてスコープを隔離する必要があります「@」

app.directive('nextLevel', function() { 
     return { 
      restrict: 'EA', 
      scope:{ popoverHtml:'@'}, // Isolated the scope 
      template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}" 
class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>', 
      link: function (scope, el, attrs){ 
       $(el).popover({ 
        trigger: 'click', 
        html: true, 
        toggle:'popover', 
        title: 'notice !!', 
        content: scope.popoverHtml, // Access the popoverHtml html 
        placement: 'top' 
       }); 
      } 
     }; 
    }); 

更新変更を反映するためにinorderを結合：あなたはラジオボタンをクリックすると

Plunker

、消えてポップアップ表示されますを超えるポップオーバーコンテンツが更新されます。