Угловые выражения HTML

Question

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

В шаблоне HTML вы можете использовать выражения для отображения переменных области или функций области вызова. Но я все время вижу разные версии.

{{name}} показывает переменную и связывает его

{{::name}} то же самое, но без привязки

userdirective="{{::key}}" Но какая разница здесь?

ng-if="::field.sortable" С ng-если они не используют {{но с ними userdirective они делают?

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" А затем есть последний с одним {. То, когда вы создаете object.right?

Возможно, кто-то может помочь мне понять все это. Большое спасибо за ваше время. Пэт

Answer 1

{{name}} как вы говорите, двухсторонняя привязки данных

{{::name}} один способ Databinding

userdirective="{{::key}}" является интересный случай. Этот оператор использует одностороннюю привязку в userdirective ... что означает, что после $digest он просто говорит: userdirective="someValue"

Таким образом, userdirective получает это значение как простое значение. Теперь мне нужно было бы протестировать его, но в части директивы он должен сказать @, поэтому он читается как строка, а не как выражение.

Последняя просто как любой JSON вы строите

{ name: value?true:false } 

значение настройки в соответствии с условиями, что угловые оценивает, с немного волшебства: D

надежда, что помогает

Answer 2

{{ anything here}} - Это интерполяция углового выражения. Angular interpolation - здесь вы можете найти больше об этом. По сути, идея заключается в том, что он интерполирует все, что вы положите в эти скобки. Поэтому, если вы поместите выражение с некоторыми вычислениями или просто переменными, связанными с текущей областью, он преобразует все переменные в свои значения и применит вычисления.

Например: {{scopevar1 + scopevar2}} в случае эти переменные имеет несколько значений, пусть это будет 1 и 2, как результат мы увидим 3.

:: - Это значение one time binding. Например, {{::scopevar1}} будет интерполировать один раз и не будет проверять изменения scopevar1, всегда оставаться в качестве первого значения. Даже если scopevar1 будет меняться каждую секунду, значение в шаблоне будет одинаковым. Angular Expressions - здесь вы можете найти живые примеры и дополнительную информацию.

userdirective="{{::key}}" - Этот случай не более чем назначение динамического значения для вашей директивы. UserDirective рассчитывает получить простое значение, но у нас оно есть внутри нашего scope, поэтому нам нужно сказать: Эй, угловой, пожалуйста, интерполируйте переменную области видимости - key, но только один раз, поэтому моя директива получит значение и не будет искать обновления key. И угловатое делает это с удовольствием!

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" Последний случай, когда ваша директива ожидает получить какой-то конкретный JSON. И мы не хотим строить его внутри контроллера. Иногда бывает легче делать такие вещи в tempalte. Поэтому мы помещаем конкретный объект с двумя свойствами: condition, mdColors. И сказать, что первое свойство, присвоенное результату функции, а второе - простой объект {color:'primary'}.

Вот и все!

Answer 3

{{var}} - двухстороннее связующее выражение, а {{:: var}} - одностороннее связующее выражение. выражение с :: не изменится после набора, это кандидат для одноразовой привязки. Пройдите через: https://docs.angularjs.org/guide/expression для получения лучших примеров на этих

Answer 4

{{name}} - это обычный случай, который вы найдете. Вы в основном печатаете переменную name и обновляете ее после ее изменения.

{{::name}} - то же, но стоимость доставки цветов не будет изменяться после стабилизации.

Итак, в первом случае ваш шаблон обновляется после изменения name. В последнем это не так.

userdirective="{{::key}}" является one-way one-time binding. Оставьте ::, и ваша директива получит обновления, если изменения ключа. Однако, если директива изменяет ключ, он не будет обновлять родителя.

ng-if="::field.sortable" является двусторонним связыванием. Изменения идут в обоих направлениях. В этом случае директиву контролирует field.sortable.

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" Используется, когда вы хотите создать adhoc-объекты. Популярным кейсом является ng-class. Вы можете создать этот объект в контроллере, а также не ставить слишком много логики в свой шаблон.

В любом случае, желательно, чтобы прочитать прекрасные документы https://docs.angularjs.org/guide