ngClassは親ディレクティブの変更を適用しません

Question

2つのディレクティブを作成しました。コントローラを使用して別のディレクティブのAPIを公開しました。

子ディレクティブは 'bodyElement'ディレクティブで、クリックすると親ディレクティブテンプレートのクラスを更新する必要があります。

親$ scopeの変更が適用されますが、ngClassスイッチは適用されません。

はあなたが役立つことを願っ： ディレクティブ：親ディレクティブの

.directive('humanBody', function() { 

     return { 
      transclude : true, 
      scope: {}, 
      templateUrl: 'view1/template/human-body.tpl.html', 
      controller: ['$scope', function ($scope) { 
       $scope.form = {}; 

       $scope.body = {}; 
       $scope.body.selection = {}; 
       $scope.body.selection.head = true; 
       $scope.body.selection.arm = false; 
       $scope.body.selection.chest = false; 
       $scope.body.selection.leg = false; 


       $scope.isActive = function (type) { 
        return $scope.body.selection[type]; 
       }; 

       this.toggle = function (type) { 
        $scope.body.selection[type] = !$scope.body.selection[type]; 
       } 


      }] 
     } 

    }) 


    .directive('bodyPart', function() { 

     return { 
      transclude : true, 
      scope: { 
       type: '@' 
      }, 
      require: '^humanBody', 
      link: function (scope, elem, attr, humanBody) { 

       elem.on('click', function (event) { 
        console.info('toggle ' + scope.type); 
        humanBody.toggle(scope.type); 
       }); 


      } 

     } 


    }); 

テンプレート：

をノー背景<間ngClassスイッチ内のisActive（タイプ）ことを必要とする - >型の容器がトグルしたとき（真偽）。 ページをレンダリングするだけで動作します。

<div class="container"> 
    <div class="row col-xs-12 body-part-container body-container"> 
     <div class="col-xs-12 " 
      ng-class="{'no-background': !isActive('head'), 'head-container':isActive('head')}"> 
      <div class=" col-xs-12 arm-container" 
       ng-class="{'no-background': !isActive('arm'), 'arm-container':isActive('arm')}"> 
       <div class="col-xs-12 chest-container" 
        ng-class="{'no-background': !isActive('chest'), 'chest-container':isActive('chest')}"> 
        <div class="col-xs-12 leg-container container" 
         ng-class="{'no-background': !isActive('leg'), 'leg-container':isActive('leg')}"> 
         <body-part type="head" class="head col-xs-12"></body-part> 
         <body-part type="arm" class="arm col-xs-4"></body-part> 
         <body-part type="chest" class="chest col-xs-4"></body-part> 
         <body-part type="arm" class="arm col-xs-4"></body-part> 
         <body-part type="leg" class="leg col-xs-12"></body-part> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはcustomEventからスコープ変数を更新しているとして、あなたは（ビューレベルのバインディングを更新するサイクルを消化実行するために、角親密ではないでしょう、外の世界からの角度のコンテキストを更新）、bodyPartディレクティブでダイジェストサイクルをキックオフする必要があります。

コードを使用しているアンギュラ1のバージョンは何

elem.on('click', function (event) { 
    console.info('toggle ' + scope.type); 
    humanBody.toggle(scope.type); 
    scope.$apply(); 
});