ngClass不会在父指令中应用更改

Question

i made two directives, one's exposing an API for another directive using controller.

The child directive is a 'bodyElement' directive, and when clicked should update a class of the parent directive template.

While the modification of the parent $scope applies, the ngClass switch doesn't apply.

Hope you can help: Directives:

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


            }

        }


    });

template of parent directive:

i need that isActive(type) in ngClass switch between no-background <-> type-container when toggling (false/true). It just work when rendering the page.

<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

You need to kick off digest cycle in bodyPart directive, as you are updating scope variable from customEvent (updating angular context from outside world wouldn't intimate angular to run digest cycle to update view level bindings).

Code

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