ngClass不會在父指令中應用更改

Question

我做了兩個指令，一個是使用控制器為另一個指令公開一個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）在切換（false / true）時在無背景<-> type-container之間切換。 它僅在呈現頁面時起作用。

<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更新范圍變量（從外部世界更新角度上下文不會親密角度來運行摘要循環來更新視圖級別綁定）。

碼

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