javascript - ngClass 不应用父指令中的更改

Question

我创建了两个指令，一个使用 Controller 为另一个指令公开 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>

Answer 1

您需要在 bodyPart 指令中启动摘要周期，因为您正在从 customEvent 更新范围变量(从外部世界更新 Angular 上下文不会让 Angular 运行摘要循环以更新 View 级别绑定(bind))。

代码

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