ngClass не применяет изменения в родительской директиве

Question

ngClass не применяет изменения в родительской директиве

0

Я создал две директивы, один из которых представляет API для другой директивы, использующей контроллер.

Директива child является директивой 'bodyElement', и при нажатии следует обновить класс шаблона родительской директивы.

Пока применяется модификация родительской области $, переключатель 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);
                });


            }

        }


    });

шаблон родительской директивы:

Мне нужно, что isActive (type) в переключателе ngClass между no-background <-> type-container при переключении (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>

Yuri Blanc 16 май 2016, в 15:57

Источник

0

Какую версию Angular 1 вы используете?
mariocatch 16 май 2016, в 13:39
0

угловая версия 1.4.0
Yuri Blanc 16 май 2016, в 13:42

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Какую версию Angular 1 вы используете?

Pankaj Parkar · Accepted Answer · 2016-05-16T12-16-00.000Z

Вам нужно bodyPart цикл дайджеста в директиве bodyPart, поскольку вы обновляете переменную области из customEvent (обновление углового контекста из внешнего мира не будет интимным, чтобы запустить цикл дайджеста, чтобы обновить привязки уровня изображения).

Код

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