WedX - журнал о программировании и компьютерных науках

Два ng-класса на один элемент с компиляцией работают некорректно

Я написал директиву, которая выглядит так (я пропускаю ненужный код):

Шаблон

<div ng-class="{'dir_a' : FoobarCtrl.dirFoo, 'dir_b' : !FoobarCtrl.dirFoo}" ng-transclude></div>

Контроллер

           return {
            restrict: 'E',
            templateUrl: TemplateFileSeeAbove,
            scope: {},
            replace: true,
            transclude: true,
            controllerAs: 'FoobarCtrl',
            controller: controller,
            bindToController: {
                dirFoo: '@'
            },
            // https://stackoverflow.com/questions/30440194/merge-ngclass-attributes-when-replace-true
            compile: function compile(tElement, tAttrs) { // jshint ignore:line
                tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');
            }

Я использую это для объединения элементов ng-класса, и в целом это работает отлично.

В моем другом шаблоне я использую директиву со следующими элементами:

<test-directive ng-class="{'classA' : (varA || varB), 'classB' : (!(varA || varB))}">
random code
</test-directive>

даже если скомпилированный код выглядит как файл (я использовал console.log для проверки) - он как-то работает неправильно. Если varA и varB оба TRUE, мой DIV получает оба класса (classA и classB), но он должен получить только первый (classA).

Странно, если я заменю

'classB' : (!(varA || varB))

в

'classB' : (!(true || true))

это работает. Кто-нибудь понял, почему он не примет мои переменные $scope, верно?

Спасибо за любую помощь...

редактировать Это должна быть проблема с функцией компиляции, которую я использую здесь для объединения двух ng-классов в одном и том же элементе. Когда я удаляю ng-класс моей директивы, он работает нормально - может показаться, что директива не может связаться с переменными области видимости.


  • В первом шаблоне отсутствует закрывающая кавычка для атрибута ng-class. 11.04.2016
  • если то, что сказал jcubic, не это, попробуйте varA==true || varB==true // varA!=true && varB != true 11.04.2016
  • @jcubig - здесь был тип спасибо, но в моем реальном коде его нет 11.04.2016
  • @Walfrat не работает :( 11.04.2016
  • Можете ли вы попробовать сначала переместить ng-transclude в подраздел на всякий случай? 11.04.2016

Ответы:


1

решение:

<test-directive ng-class="{'classA' : ( {{varA}} || {{varB}} ), 'classB' : (!({{varA}} || {{varB}}))}">
random code
</test-directive>
11.04.2016
  • Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и/или как этот код отвечает на вопрос, повышает его ценность в долгосрочной перспективе. 11.04.2016
  • Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: [email protected]