ngClass 不应用父指令中的更改答案

【问题标题】：ngClass doesn't apply changes in parent directivengClass 不应用父指令中的更改
【发布时间】：2016-05-16 13:32:33
【问题描述】：

我做了两个指令，一个是使用控制器为另一个指令公开一个 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(type) 切换时在无背景类型容器之间切换（假/真）。它只在渲染页面时起作用。

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

【问题讨论】：

您使用的是哪个版本的 Angular 1？
角度版本为 1.4.0

标签： javascript angularjs angularjs-directive

【解决方案1】：

您需要在bodyPart 指令中启动摘要循环，因为您正在从customEvent 更新范围变量（从外部更新角度上下文不会密切角度来运行摘要循环以更新视图级别绑定）。

代码

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

【讨论】：