Can I not use $ctrl. in angular component template

Question

I am using angular 1.5 and I wanted to extract part of my DOM into a component.
Here is what I have done so far:

angular.module('my-app').component("menuItem",{
    templateUrl : "lib/menu-item.tmpl.html",
    bindings : {
        index : "<",
        first : "<",
        last : "<",
        item : "=",
        onDelete : "&",
        onMoveUp : "&",
        onMoveDown : "&"
    },
    controller : function($scope) {
    }
});

And the template looks like so:

<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>

I use this component (far from finished!) like so:

<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>

I have three main questions I guess:

1. Why do I have to use $ctrl everywhere in my template? There is $scope so why all the bindings go to $ctrl rather than $scope? And is there a way to change this?
2. Can I somehow have values like $index, $first and $last passed in? It seems to me like it is a "buttery butter" to pass them in...
3. Is this even the right approach? Or should I use directive? I know components have isolated scope, and directives can have not-isolated scope. but could I mix/match in a directive (share the scope with controller, but also add my own functions to be used within directive/template only?)

Thanks for your help.

Solution

Why do I have to use $ctrl everywhere in my template? There is $scope so why all the bindings go to $ctrl rather than $scope? And is there a way to change this?

$scope will disappear with angular 2.0. You are not obliged to use $ctrl. I recommend that you still use "controllerAs" with a named controller, in order to avoid confusion inside your templates.

controllerAs: "menuItemCtrl",
controller : function($scope) {
},

and then :

            <button ng-click="menuItemCtrl.onMoveUp({index : menuItemCtrl.index})"
                    ng-disabled="menuItemCtrl.first">
                <i class="icon icon-up"></i>
            </button>

to use your bounded variables inside your controller, you have to use this :

controller : function() {
    var self = this;
    // self.index contains your index
}

Can I somehow have values like $index, $first and $last passed in? It seems to me like it is a "buttery butter" to pass them in...

I don't really understand how you want them to be passed.

Is this even the right approach? Or should I use directive?

When you're facing an application that can be displayed as a tree of components, components are the best option.

Comments

[Daniel Gruszczyk]

Thanks, I will use controllerAs for clarity. I ended up moving functionality like move-up/down and delete to the outside of the component, so I do not have to pass $index values and many events.