Nano Hash - криптовалюты, майнинг, программирование

остановить выполнение другой директивы в моей пользовательской директиве элемента

у меня есть директива пользовательского элемента, например. как ниже

  <my-wrapper ng-model="values.abc" unique-check="" list="list" prop="name"> </my-wrapper>

Эта директива требует ng-model, который позже устанавливается во внутреннем входном теге.

  <input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>

проблема заключается в том, что когда я проверяю консоль, я вижу, что ng-модель в директиве не совпадает с ng-моделью во входном теге.

Как я могу убедиться, что ng-модель во внешнем теге не создается и создается только один раз внутри моей директивы.

мой код директивы ниже

app.directive("myWrapper", function(){

  var templateFn = function(element, attrs){
    return '<div ng-form="myform">'+
          '<input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>'+
          '<span>(inside directive) : isDuplicate:{{myform.myfield.$error.isDuplicate}}</span>'
          '</div>';
  }

  return {
    restrict :'E',
    template : templateFn,
    require: 'ngModel',
    scope: true
  }
});

Обратите внимание, что приведенное выше — это просто сокращенная версия моей директивы, и я сохранил область видимости: true из-за требований в общем сценарии.

Если непонятно, о чем я говорю, проверьте консоль ЭТОГО ПЛАНКА.

Я пробовал решения с terminal : true и/или priority : 1001, чтобы ng-модель создавалась не по директиве html, а только по входному тегу, но ни одно из них не сработало.

да, одним из решений может быть замена ng-model, скажем, my-model в директиве, а затем снова добавление ее как ng-model во входной тег, но тогда она используется почти в 1000 местах в моем приложении, так что на самом деле не будет хотелось бы заменить его таким.

любой другой способ решить эту проблему.


  • Может быть, это пропавший </div>? (Дальний план, я знаю...) Также пытаюсь установить приоритет на что-то отличное от 0. (priority: 0 по умолчанию, но есть хитрая синхронизация в функции связывания, когда происходит последний шаг, приоритеты запускаются в обратном порядке.) Если вы делаете plunker может быть легче отлаживать. 19.12.2014
  • спасибо, что указали на это, приведенный выше код - всего лишь надуманный пример. соответственно обновит вопрос... 19.12.2014
  • Насколько я знаю, к сожалению, вам придется выбрать опцию my-model. 21.12.2014
  • @CorySilva создал плункер... 22.12.2014
  • Я действительно новичок в Angular, но пытаюсь понять, что разработчики делают в мире стека с angular, и наткнулся на этот вопрос. Не уверен, правильно ли я понял вопрос, но почему мы не можем просто использовать функцию ссылки для удаления атрибута? Перед удалением просто удерживайте значение. Дайте мне знать, если я ошибаюсь. 26.12.2014
  • спасибо, но это не сработает, потому что ng-модель создается еще до того, как директива получит шанс. 26.12.2014
  • Решение, которого вы пытаетесь избежать, — это решение, которое вы должны были использовать в первую очередь. Вы не используете ngModel, поэтому странно его включать. Замена ng-model на my-model должна быть делом нескольких секунд, даже при наличии почти 1000 мест. 26.12.2014
  • plnkr.co/edit/1Comw7jOfmOoIk6zELeF?p=preview подойдет ли он вам.. я удалил родительскую директиву div после запуска функции связывания. 26.12.2014
  • @pankajparkar даже с вашим решением в консоли я получаю ngModel === myform.myfield: false, так что оба не одинаковы, следовательно, это не решает проблему 29.12.2014

Ответы:


1

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

Я не очень уверен, почему у вас есть директива, которая оборачивает форму вокруг одного ввода, но, как вы сказали, это надуманный пример. Лично я бы изменил эту структуру, но я старался не быть слишком разрушительным.

Надеюсь это поможет. Может быть, вы можете объяснить свои намерения за этим.

22.12.2014
  • one solution can be to replace ng-model with lets say my-model on the directive and then again add it as ng-model on input tag этот вариант я знаю, но просто хотел избежать. Что касается одной формы для каждого элемента управления, внутренняя директива, основанная на вводе, может иметь несколько вводов, в этом простом примере - я не хотел запутывать других, рассказывая логику, которую не так уж необходимо знать. 22.12.2014
  • Решение my-model кажется проще, чем реструктуризация. Для структуры почему бы просто не использовать две директивы ng-repeat: одну над массивом форм и вторую над inputs/ng-models? 22.12.2014
  • это не просто ng-модель, мне придется сделать это для большинства моих пользовательских директив, основанных на директивах-оболочках. Это похоже на огромное, очень большое изменение для меня :(, но, к сожалению, это никак не обойти :( Я действительно не понимаю, почему элементы терминала/приоритета не работают :( 22.12.2014
  • Терминал FWIW работает правильно, но ваша директива uniqueCheck дает ошибку, потому что вы говорите ей, что требуется ngModel, но terminal: true специально останавливает создание ngModel 22.12.2014
  • если он остановит выполнение директивы ng-model, он также должен остановить выполнение директивы uniqueCheck 22.12.2014
  • этот плункер не работает ... не понял, что вы хотели показать, используя это 22.12.2014
  • Давайте продолжим обсуждение в чате. 22.12.2014

  • 2

    Вы можете попробовать использовать трансклюзию. Вместо того, чтобы пытаться выполнить сложную часть стандартной компиляции AngularJS, вы можете просто изменить свою структуру на что-то вроде:

    <my-wrapper>
        <input name="..." ng-model="...">
    </my-wrapper>
    

    и сделайте так, чтобы ваша директива расширила оболочку в ваш шаблон с включенным вводом внутри него. (См. параметр transclude в $compile документации.) Это также повысит читабельность ваших шаблонов.


    В качестве альтернативы, если вам нужна ваша директива для создания сложного контента (несколько входных данных и т. д.), инкапсулированного и связанного с этим единственным ng-model, вы можете оставить ng-model там, где он есть, и сделать вашу директиву полностью инкапсулированной. Под этим я подразумеваю что-то вроде:

    .directive('myComplexField', function () {
        return {
            scope: {},
            require: 'ngModel',
            link: function ($scope, $element, $attrs, ngModelCtrl) {
                ngModelCtrl.$formatters.push(function (modelValue) {
                    // ... (update your isolated model based on external model change)
                });
                ngModelCtrl.$parsers.push(function (viewValue) {
                    // ... (update external model based on your isolated model)
                });
                $scope.$watch('... (properties of your isolated model)', function () {
                    // force sync (parser code above will take care of setting the real value)
                    ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue);
                });
            }
        };
    })
    

    (см. ngModelController документацию). Вам просто нужно быть осторожным, чтобы не создать бесконечный цикл между вашими $parser и $formatter.


    Если вы действительно твердо намерены оставить ng-model в обертке и пропустить его, используя priority и terminal, это довольно просто:

    .directive('foo', function ($compile, $timeout) {
        return {
            restrict: 'E',
            priority: 2,  // ngModel priority is 1 (see the docs)
            terminal: true,
            link: function ($scope, $element) {
                $compile($element, undefined, 1)($scope);  // compiles priority *lower than 1*
            }
        };
    }
    

    Этого подхода следует избегать, если это вообще возможно, потому что он имеет много очевидных недостатков и не имеет реальных преимуществ.

    26.12.2014
  • входной тег генерируется динамически, поэтому нельзя использовать transclude 29.12.2014
  • В порядке. Я не могу точно сказать, пока не увижу весь сценарий, но я все же рекомендую сделать чистый сплит. Если не то, что я предложил, то наоборот (предложено @CorySilva в его ответе) - поместить выражение модели в конфигурацию вашей директивы. 29.12.2014
  • Я расширил свой ответ третьей альтернативой, полезной для сложных множественных входов в одну логику модели. 29.12.2014
  • извините, но это тоже не помогает, что я хочу понять, как работает терминал и приоритет, а точнее, почему они не могут работать в этом случае, я знаю об альтернативных решениях (многие из которых я уже упоминал в самом своем вопросе. ), но я искал наилучшее возможное решение, которое казалось правдоподобным с использованием свойств терминала/приоритета, но, увы, это не так 29.12.2014
  • Тогда ответ просто нет, вы не можете делать то, что хотите, с выбранными вами инструментами. Цель terminal (используется с priority) состоит в том, чтобы позволить директиве вырезать свой элемент и вручную скомпилировать директивы более низкого уровня позже, при вставке его куда-нибудь (подумайте ng-repeat). 29.12.2014
  • это то, что на самом деле делает директива, вручную компилируя директивы более низкого уровня, проверьте планкер. Генерирует html, компилирует и заменяет существующий элемент 29.12.2014
  • @CorySilva уже прокомментировал ваш плункер. Вы не хотите, чтобы ng-model в элементе-оболочке компилировалось, но вы пытаетесь использовать его контроллер в uniqueCheck. 29.12.2014
  • Кроме этого, вы можете использовать priority и terminal, чтобы пропустить ngModel (укажите свою директиву ngModel.priority + 1 и вручную $compile с помощью ngModel.priority - 1). Я не могу не подчеркнуть, насколько плохим был бы дизайн. 29.12.2014
  • Можете ли вы предоставить мне пример того, как это сделать? 29.12.2014
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

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

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..