Почему я не могу использовать интерполяцию с директивой?

Question

Я искал и нашел несколько статей, посвященных теме «Как назначить переменную области действия значению тега html-атрибута».См .:

https://docs.angularjs.org/guide/interpolation

Как назначить значение переменной angularjs атрибуту html-элемента, например атрибуту имени входного элемента

Inмой контроллер Я определил следующее:

    $scope.reportFields = "{'summary.imageID':'Image ID' }";

В моем HTML-документе я определил следующее:

    <a href="{{reportFields}}">A TEST EXAMPLE</a>
    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" filename="'mySearch'">

когда я перенесу страницу в браузер, я обнаружу, что страница сообщаетсинтаксическая ошибка синтаксического анализа при определении {{reportFields}} для моего элемента кнопки.

     Error: [$parse:syntax] Syntax error: Token '{' invlaid key at column 2 of the expression [{{reportFields}}] starting at [reportFields}}].

, если я отказываюсь использовать переменную и жестко кодирую значение, как в:

    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{'summary.imageID':'Image ID' }" filename="'mySearch'">        

, оно компилируется иработает правильно.Если я добавлю 'ng-if', он будет правильно скомпилирован, как показано ниже:

    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" ng-if="reportFields.length > 0" filename="'mySearch'">

Кроме того, когда я проверяю сгенерированный HTML-код с помощью инспектора, я вижу, что для тега 'ahref' эта интерполяция angularjs перевела'reportFields' to '"{' summary.imageID ':' Image ID '}"' для тега ahref, но он не перевел значение для тега полей отчета, указанного на кнопке.Я также пытался:

    ng-if="1==1" filename="'mySearch'">

для моего выражения, которое всегда должно быть верным.Мои вопросы (и я новичок в angularjs, и мне нужна помощь в понимании):

1. Почему я получаю ошибку синтаксического разбора при использовании двойных углов currly со вторым элементом HTML (кнопкой), но непервый (href) ??
2. Почему ошибка синтаксического анализа исчезает с оператором 'ng-if'

3. Почему интерполяция не происходит в случае

    report-fields="{{reportFields}}"
   

   , но это прекрасно для:

    <a href="{{reportFields}}">A TEST EXAMPLE</a>
   

Спасибо за вашу помощь в продвинутом.Пит

Answer 1

Что вам, вероятно, нужно:

<a ng-href="reportFields">A TEST EXAMPLE</a>

Хотя это не имеет никакого смысла, учитывая то, как вы определили reportFields.Обратите внимание на ng-href и отсутствие интерполяции.На самом деле вы присваиваете выражение reportFields обычному HTML-атрибуту href, который не интерпретируется Angular.

Angular обрабатывает ваш HTML как шаблон, а не пытается отобразить его так, как это сделал бы браузер.,Он берет этот шаблон и превращает его в читаемый браузером DOM HTML.Это помогает объяснить поведение, о котором вы спрашиваете.

Ответы на ваши вопросы:

1. Интерполяция (фигурные скобки) на самом деле является директивой сспециальный синтаксис, который анализатор должен оценивать вместе с любыми другими директивами, такими как ng-show, ng-repeat, пользовательские директивы и т. д. Нет никакой гарантии, что директива интерполяции будет обработана перед другой директивой, которая пытается связать ее.Фактически, эти другие директивы, такие как report-fields, будут получать необработанную разметку интерполяции, а не предполагаемые данные.Это то, что выдает ошибку.См. Последний абзац в документации по интерполяции

   Почему смешивание интерполяции и выражений является плохой практикой

   Поскольку href на самом деле не является директивой- это атрибут-- Angular не пытается трактовать его как директиву или привязывать к интерполяции, поэтому не выдается никакой ошибки.Он просто выводит ожидаемый результат в DOM: href="parsed value".

2. ng-if не оказывает специальной помощи по этому вопросу, за исключением того, что он анализируется перед вашей директивой report-fields, а затем отменяетсядальнейший разбор элемента, если false.Если в этой ситуации вы не получите ошибку, скорее всего, это связано с тем, что условие if оценено как ложное, а директива report-fields не была проанализирована.(Не удается увидеть весь ваш код для подтверждения.)

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