AngularJsディレクティブ内でコントローラ変数を使用する方法

Question

ディレクティブ内でコントローラ変数を使用する方法。私は、ディレクティブのスコープ内popoverHtmlを使用しますが、このタイプは動作しないように私には、タイプを追加する場合：

次のように：スコープ：{popoverHtml： '@'、タイプ：@}、

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

good <input type='radio' name='type' value='good' data-ng-model='type' 
data-ng-change='change(type)' /> 
    bad <input type='radio' name='type' value='bad' data-ng-model='type' 
data-ng-change='change(type)' /> 
     <next-level id='pop' popover-html='{{typeMessage}}'></next-level> 

私のコントローラは、次のとおりです。

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

app.controller('MainCtrl', function($scope) { 
    $scope.typeMessage = 'PopOverTest'; 
    $scope.type = false; 
    $scope.change = function(type){ 
    if(type == 'good'){ 
     $scope.typeMessage = 'very good'; 
    }else if(type == 'bad'){ 
     $scope.typeMessage = 'very bad'; 
    } 
    }; 
}); 

私のディレクティブ：

app.directive('nextLevel', function() { 
      return { 
       restrict: 'EA', 
       scope:{ popoverHtml:'@'}, 
      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[0]).popover({ 
         trigger: 'click', 
         html: true, 
         toggle:'popover', 
         title: 'notice !!', 
         content: scope.popoverHtml, // Access the popoverHtml html 
         placement: 'bottom' 
        }); 

        attrs.$observe('popoverHtml', function(val){ 
        $(el[0]).popover('hide'); 
        var popover = $(el[0]).data('bs.popover'); 
        popover.options.content = val; 
        console.log(popover); 
        }) 


       } 
      }; 
     }); 

デモ：https://plnkr.co/edit/wfC4DrTIp8fRIs6hEEDa?p=preview

Answer 1

あなたはng-class内で使用する場合は、ディレクティブに結合@としてtypeを送信することはできません。メインコントローラのtypeに変更を加えた場合、それらはディレクティブ内のng-classには反映されません。見てくださいhereをご覧ください。

ng-classの変更を反映させるには、=バインディングとして渡す必要があります。

Plunker here