问题 我可以不使用$ ctrl。在角度组件模板中

我使用角度1.5，我想将我的部分DOM提取到一个零件。
这是我到目前为止所做的：

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 传入？在我看来，它是一个“黄油黄油”传递给他们...
这甚至是正确的方法吗？或者我应该使用指令？我知道组件具有隔离范围，并且指令可以具有非隔离范围。但我可以在一个指令中混合/匹配（与控制器共享范围，但也添加我自己的函数只在指令/模板中使用？）

谢谢你的帮助。

为什么我必须在模板中的每个地方都使用$ ctrl？有范围那么为什么所有绑定都转到$ 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传入的值吗？它在我看来，这是一个“黄油黄油”传递给他们...

我真的不明白你希望如何传递它们。

这甚至是正确的方法吗？或者我应该使用指令？

当您面向可以显示为组件树的应用程序时，组件是最佳选择。

问题我可以不使用$ ctrl。在角度组件模板中

答案:

热门问题

问题 我可以不使用$ ctrl。在角度组件模板中

答案:

热门问题

问题我可以不使用$ ctrl。在角度组件模板中