ngClass不适用父指令中的更改

我提出了两条指令，一条使用控制器公开另一条指令的API。ngClass不适用父指令中的更改

child指令是一个'bodyElement'指令，点击时应该更新父指令模板的一个类。

修改父$范围适用时，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); 
       }); 


      } 

     } 


    });

父指令的模板：

我需要isActive在无背景<之间ngClass开关（类型） - >型容器切换时（假/真）。这只是在渲染页面时才起作用。

<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>

来源

2016-05-16 Yuri Blanc

您正在使用什么版本的角1？ – mariocatch

角度版本是1.4.0 –

您需要揭开序幕，在bodyPart指令消化周期，因为你是从customEvent更新范围变量（更新从外界的角度范围内不会亲密角运行周期消化更新视图级绑定）。

代码

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

来源

2016-05-16 13:48:23

谢谢你的工作！ –

ngClass不适用父指令中的更改

回答

相关问题