ngClass übernimmt keine Änderungen in der Eltern-Direktive

Question

Ich habe zwei Direktiven gemacht, die eine API für eine andere Direktive mit Controller verfügbar macht.

Die untergeordnete Direktive ist eine bodyElement-Direktive und sollte beim Klicken auf eine Klasse der übergeordneten Direktivenvorlage aktualisiert werden.

Während die Änderung des übergeordneten Bereichs $ gilt, gilt der Schalter ngClass nicht.

Hoffnung, die Sie helfen können: Richtlinien:

.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); 
       }); 


      } 

     } 


    }); 

Vorlage der Mutterrichtlinie:

ich brauche, dass isActive (Typ) in ngClass Schalter zwischen Leer Hintergrund < -> Typ-Container beim Makeln (Falsch Richtig). Es funktioniert nur beim Rendern der Seite.

<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

Sie müssen Auszyklus verdauen in bodyPart Richtlinie treten, wie Sie Spielraum Variable aus customEvent (Aktualisierung Winkel Kontext von außen nicht intim Winkel laufen Zyklus zu verdauen Ansichtsebene Bindungen zu aktualisieren) aktualisieren.

-Code

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