Могу ли я использовать $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? Это мне кажется, что это "масло сливочное", чтобы передать их в...

Я действительно не понимаю, как вы хотите, чтобы их передавали.

Это даже правильный подход? Или я должен использовать директиву?

Когда вы сталкиваетесь с приложением, которое может отображаться как дерево компонентов, компоненты являются наилучшим вариантом.