Question

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

感谢您的帮助。

Answer 1

为什么我必须在模板中的每个地方都使用$ ctrl？有范围那么为什么所有绑定都转到$ ctrl而不是$ scope？还有一个改变这个的方法？

$ scope将随着角度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。在角度组件模板中

1 个答案: