Инструменты пользователя
angular:angularjs:custom_directive:component
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:custom_directive:component [2021/07/12 23:26] werwolf [Controller и ControllerAs] |
angular:angularjs:custom_directive:component [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 125: | Строка 125: | ||
| </code> | </code> | ||
| - | Итак, что у нас получилось с контроллером для обоих случаев: | + | Итак, что у нас получилось с контроллером для обоих случаев:\\ |
| + | \\ | ||
| + | **до** | ||
| <code javascript> | <code javascript> | ||
| - | // до | + | |
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html ng-app="app"> | <html ng-app="app"> | ||
| Строка 190: | Строка 191: | ||
| </code> | </code> | ||
| - | после | + | **после** |
| <code javascript> | <code javascript> | ||
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| Строка 300: | Строка 301: | ||
| ... | ... | ||
| } | } | ||
| + | </code> | ||
| если мы задали свойство oneWay таким образом, то оно будет реагировать на изменения внешнего связанного объекта, при этом свои изменения передавать “наружу” не будет. И да, сразу отвечу на вопрос, который у вас наверное появился: работает только в одну сторону. | если мы задали свойство oneWay таким образом, то оно будет реагировать на изменения внешнего связанного объекта, при этом свои изменения передавать “наружу” не будет. И да, сразу отвечу на вопрос, который у вас наверное появился: работает только в одну сторону. | ||
| Строка 306: | Строка 308: | ||
| Если вы посмотрите на исходный код, то увидите что разработчики AngularJS особо не парились и сделали метод **component()** просто оболочкой над directive(). | Если вы посмотрите на исходный код, то увидите что разработчики AngularJS особо не парились и сделали метод **component()** просто оболочкой над directive(). | ||
| - | ====Обновляемся до Angular2==== | ||
| - | Как уже было сказано: использование метода **.component()** серьезно упростит переход на **Angular2**. Посмотрите как будет выглядеть ваш компонент во второй версии фреймворка(конечно, с новым синтаксисом шаблонов):\\ | + | |
| - | <code javascript> | + | |
| - | var Counter = ng | + | |
| - | .Component({ | + | |
| - | selector: 'counter', | + | |
| - | template: [ | + | |
| - | ' | + | |
| - | <div class="todo">', | + | |
| - | '<input type="text" [(ng-model)]="count">', | + | |
| - | '<button type="button" (click)="decrement();">-</button>', | + | |
| - | '<button type="button" (click)="increment();">+</button>', | + | |
| - | '</div> | + | |
| - | ' | + | |
| - | ].join('') | + | |
| - | }) | + | |
| - | .Class({ | + | |
| - | constructor: function () { | + | |
| - | this.count = 0; | + | |
| - | }, | + | |
| - | increment: function () { | + | |
| - | this.count++; | + | |
| - | }, | + | |
| - | decrement: function () { | + | |
| - | this.count--; | + | |
| - | } | + | |
| - | }); | + | |
| - | </code> | + | |
| - | </code> | + | |
angular/angularjs/custom_directive/component.1626121590.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
