Могу ли я использовать $ctrl. в шаблоне компонента angular
Я использую angular 1.5, и мне нужно извлечь часть моего DOM в component.
Вот что я сделал до сих пор:
angular.module('my-app').component("menuItem",{
templateUrl : "lib/menu-item.tmpl.html",
bindings : {
index : "<",
first : "<",
last : "<",
item : "=",
onDelete : "&",
onMoveUp : "&",
onMoveDown : "&"
},
controller : function($scope) {
}
});
И шаблон выглядит так:
<div>
<aside class="sort-buttons">
<ul>
<li>
<button ng-click="$ctrl.onMoveUp({index : $ctrl.index})"
ng-disabled="$ctrl.first">
<i class="icon icon-up"></i>
</button>
</li>
<li>
<button ng-click="$ctrl.onMoveDown({index : $ctrl.index})"
ng-disabled="$ctrl.last">
<i class="icon icon-down"></i>
</button>
</li>
</ul>
</aside>
<div class="row">
<button class="btn btn-danger btn-icon btn-remove"
ng-click="$ctrl.onDelete({index : $ctrl.index})">
<i class="icon icon-remove"></i>
</button>
</div>
</div>
Я использую этот компонент (далеко не законченный!) так:
<section class="container menu">
<menu-item index="$index" first="$first" last="$last" item="item"
on-delete="removeItem(index)"
on-move-up="moveItemUp(index)"
on-move-down="moveItemDown(index)"
ng-repeat="item in menu">
</menu-item>
<!-- some other display details of `$ctrl.item` -->
</section>
У меня есть три основных вопроса, которые я предполагаю:
- Почему мне нужно использовать
$ctrl
везде в моем шаблоне? Существует $scope
, так почему все привязки переходят к $ctrl
, а не к $scope
? И есть ли способ изменить это?
- Могу ли я каким-то образом иметь значения, такие как
$index
, $first
и $last
? Мне кажется, что это "масло сливочное", чтобы передать их в...
- Это даже правильный подход? Или я должен использовать директиву? Я знаю, что компоненты имеют изолированный объем, а директивы могут иметь неизолированный объем. но можно ли смешивать/сопоставлять в директиве (совместно использовать область с контроллером, но также добавлять мои собственные функции, которые будут использоваться только в директиве/шаблоне?)
Спасибо за вашу помощь.
Ответы
Ответ 1
Почему мне приходится использовать $ctrl везде в моем шаблоне? Существует $scope так почему все привязки идут в $ctrl, а не в $scope? И есть ли способ изменить это?
$scope исчезнет с помощью angular 2.0. Вы не обязаны использовать $ctrl. Я рекомендую вам по-прежнему использовать "controllerAs" с именованным контроллером, чтобы избежать путаницы внутри ваших шаблонов.
controllerAs: "menuItemCtrl",
controller : function($scope) {
},
а затем:
<button ng-click="menuItemCtrl.onMoveUp({index : menuItemCtrl.index})"
ng-disabled="menuItemCtrl.first">
<i class="icon icon-up"></i>
</button>
чтобы использовать ваши ограниченные переменные внутри вашего контроллера, вы должны использовать this
:
controller : function() {
var self = this;
// self.index contains your index
}
Могу ли я каким-то образом иметь такие значения, как $index, $first и $last? Это мне кажется, что это "масло сливочное", чтобы передать их в...
Я действительно не понимаю, как вы хотите, чтобы их передавали.
Это даже правильный подход? Или я должен использовать директиву?
Когда вы сталкиваетесь с приложением, которое может отображаться как дерево компонентов, компоненты являются наилучшим вариантом.