Инструменты пользователя
angular:angularjs:custom_directive:bindtocontroller
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:custom_directive:bindtocontroller [2021/07/12 17:56] werwolf |
angular:angularjs:custom_directive:bindtocontroller [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | =====bindToController===== | ||
| + | |||
| Я постоянно нахожу что-то новое в Angular 1.3. Одна из вещей, которые я нашел, - это атрибут bindToController. Я сторонник использования синтаксиса controllerAs, чтобы избавиться от переменной $scope. Единственная проблема раньше заключалась в том, что в директиве вам все еще приходилось использовать $scope… до сих пор.\\ | Я постоянно нахожу что-то новое в Angular 1.3. Одна из вещей, которые я нашел, - это атрибут bindToController. Я сторонник использования синтаксиса controllerAs, чтобы избавиться от переменной $scope. Единственная проблема раньше заключалась в том, что в директиве вам все еще приходилось использовать $scope… до сих пор.\\ | ||
| \\ | \\ | ||
| Строка 66: | Строка 68: | ||
| </body> | </body> | ||
| </html> | </html> | ||
| + | </code> | ||
| + | |||
| + | Привязать свои свойства в директиве к контроллеру, а не к области | ||
| + | <code javascript> | ||
| + | <html ng-app="app"> | ||
| + | <head> | ||
| + | <title></title> | ||
| + | <script src="http://crm.localhost/vendor/angular/angular.min.js"></script> | ||
| + | <link href="../bootstrap-theme.css" rel="stylesheet" /> | ||
| + | <link href="../bootstrap.css" rel="stylesheet" /> | ||
| + | <script> | ||
| + | angular.module("app", []) | ||
| + | .controller("studyCtrl", function ($scope) { | ||
| + | $scope.count = 5; | ||
| + | }) | ||
| + | |||
| + | .directive('counter', function counter() { | ||
| + | return { | ||
| + | |||
| + | scope: { | ||
| + | count: '=' | ||
| + | }, | ||
| + | bindToController:true, | ||
| + | controller: function ($scope) { | ||
| + | |||
| + | function increment() { | ||
| + | this.count++; | ||
| + | } | ||
| + | function decrement() { | ||
| + | this.count--; | ||
| + | } | ||
| + | this.increment = increment; | ||
| + | this.decrement = decrement; | ||
| + | }, | ||
| + | controllerAs: '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="counter.decrement();">-</div>', | ||
| + | '<input class="form-control" type="text" ng-model="counter.count">', | ||
| + | '<div class="input-group-addon" ng-click="counter.increment();">+</div>', | ||
| + | '</div>', | ||
| + | '</div>' | ||
| + | ].join('') | ||
| + | }; | ||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | </head> | ||
| + | <body ng-controller="studyCtrl as vm"> | ||
| + | <div class="container"> | ||
| + | <br> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-1"><b>контроллер</b></div> <div class="col-md-2">{{count}}</div> | ||
| + | </div> | ||
| + | <br> | ||
| + | <div class="row"> | ||
| + | <label><counter count="count"></counter></label> | ||
| + | </div> | ||
| + | </div> | ||
| + | </body> | ||
| + | </html> | ||
| + | </code> | ||
| + | |||
| + | упрощенный синтасис привязки к контроллеру директивы | ||
| + | <code javascript> | ||
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | <head> | ||
| + | <title></title> | ||
| + | <script src="http://crm.localhost/vendor/angular/angular.min.js"></script> | ||
| + | <link href="../bootstrap-theme.css" rel="stylesheet" /> | ||
| + | <link href="../bootstrap.css" rel="stylesheet" /> | ||
| + | <script> | ||
| + | angular.module("app", []) | ||
| + | .controller("studyCtrl", function ($scope) { | ||
| + | $scope.count = 5; | ||
| + | }) | ||
| + | |||
| + | .directive('counter', function counter() { | ||
| + | return { | ||
| + | scope: {}, | ||
| + | bindToController: { | ||
| + | count: '=' | ||
| + | }, | ||
| + | controller: function () { | ||
| + | |||
| + | function increment() { | ||
| + | this.count++; | ||
| + | } | ||
| + | function decrement() { | ||
| + | this.count--; | ||
| + | } | ||
| + | this.increment = increment; | ||
| + | this.decrement = decrement; | ||
| + | }, | ||
| + | controllerAs: '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="counter.decrement();">-</div>', | ||
| + | '<input class="form-control" type="text" ng-model="counter.count">', | ||
| + | '<div class="input-group-addon" ng-click="counter.increment();">+</div>', | ||
| + | '</div>', | ||
| + | '</div>' | ||
| + | ].join('') | ||
| + | }; | ||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | </head> | ||
| + | <body ng-controller="studyCtrl as vm"> | ||
| + | <div class="container"> | ||
| + | <br> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-1"><b>контроллер</b></div> <div class="col-md-2">{{count}}</div> | ||
| + | </div> | ||
| + | <br> | ||
| + | <div class="row"> | ||
| + | <label><counter count="count"></counter></label> | ||
| + | </div> | ||
| + | </div> | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| </code> | </code> | ||
angular/angularjs/custom_directive/bindtocontroller.1626101816.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
