Question

我做了两个指令，一个是使用controller公开另一个指令的API。

child指令是一个'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);
                });


            }

        }


    });

父指令的模板：

我需要在无背景＆lt; - ＆gt;之间的ngClass切换中使用isActive（type）切换时的类型容器（false / true）。它只在渲染页面时起作用。

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

ngClass不在父指令中应用更改

1 个答案: