Хобрук: Ваш путь к мастерству в программировании

Вложенные директивы и NgModel

Я чувствую, что мне не хватает фундаментальной концепции директив Angular.

Ссылаясь на этот Plnkr: http://plnkr.co/edit/WWp9lB6OvxHL8gyBSU5b?p=preview

У меня есть модель:

{
  message: string,
  value: number
}

И у меня есть директива itemEditor для редактирования этой модели:

  .directive('itemEditor', function() {
    return {
      replace: true,
      templateUrl: 'item.editor.html',
      require: 'ngModel',
      model: {
        item: '=ngModel'
      }
    };
  })

Но я хочу делегировать редактирование значения пользовательскому элементу управления:

.directive('valuePicker', function() {
    return {
      replace: true, // comment this to make it work
      templateUrl: 'value.picker.html',
      require: 'ngModel',
      scope: {
        ngModel: '='
      },

      controller: Controller
    };

    function Controller($scope, Values) {
      $scope.values = Values;
      console.log({scope:$scope});
    }

  })

В настоящее время этот код дает ошибку:

Error: $compile:multidir
Multiple Directive Resource Contention

Комментарий replace: true позволит этому коду работать. Однако я теряю инструкции по стилю из родительского шаблона. IE: класс form-control не объединяется с элементом select.

Каков угловой способ сделать эту работу?


Ответы:


1

Вы звоните value-picker дважды здесь

<value-picker class="form-control" style="width:100%" name="item" value-picker ng-model="item.value"></value-picker>

Элемент value-picker также содержит атрибут value-picker, оба рассматриваются как директивы, которые в конфликте вызывают множественную ошибку директивы. Удалите атрибут value-picker, либо назовите его элементом, либо атрибутом. Или вы можете restrict привязать директиву к конкретному объявлению.

Также удалите ng-model из элемента select шаблона value.picker.html, что вызывает другую ошибку:

Несколько директив [ngModel, ngModel], запрашивающих «ngModel»

Итак, replace: true заменяет и добавляет текущие атрибуты директивы к корневому уровню элемента шаблона (в вашем случае это select)

Обновленный Plnkr

18.08.2015
  • Ах я вижу. Таким образом, ng-модель также объединяется с шаблоном. Превосходно. Спасибо много! 18.08.2015
  • Новые материалы

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..