Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:custom_directive:component [2021/07/12 23:30] werwolf [Обновляемся до Angular2] |
angular:angularjs:custom_directive:component [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 308: | Строка 308: | ||
| Если вы посмотрите на исходный код, то увидите что разработчики AngularJS особо не парились и сделали метод **component()** просто оболочкой над directive(). | Если вы посмотрите на исходный код, то увидите что разработчики AngularJS особо не парились и сделали метод **component()** просто оболочкой над directive(). | ||
| - | ====Обновляемся до Angular2==== | ||
| - | Как уже было сказано: использование метода **.component()** серьезно упростит переход на **Angular2**. Посмотрите как будет выглядеть ваш компонент во второй версии фреймворка(конечно, с новым синтаксисом шаблонов):\\ | ||
| - | <code javascript> | ||
| - | var Counter = ng | ||
| - | .Component({ | ||
| - | selector: 'counter', | ||
| - | template: [ | ||
| - | '<div class="form-group">', | ||
| - | '<label class="control-label col-md-1" for="">Директива</label>', | ||
| - | '<div class="input-group col-md-2">', | ||
| - | '<div class="input-group-addon" ng-click="$ctrl.decrement()">-</div>', | ||
| - | '<input class="form-control" type="text" ng-model="$ctrl.count">', | ||
| - | '<div class="input-group-addon" ng-click="$ctrl.increment()">+</div>', | ||
| - | '</div>', | ||
| - | '</div>' | ||
| - | ].join('') | ||
| - | }) | ||
| - | .Class({ | ||
| - | constructor: function () { | ||
| - | this.count = 5; | ||
| - | }, | ||
| - | increment: function () { | ||
| - | this.count++; | ||
| - | }, | ||
| - | decrement: function () { | ||
| - | this.count--; | ||
| - | } | ||
| - | }); | ||
| - | </code> | ||