AngularJS 1.5组件迁移指令，从组件中调用Page函数

AngularJS 1.5 Directive to Component migration, calling Page functions from Component

本文关键字：组件 调用 Page 函数 指令 迁移 AngularJS      更新时间：2023-09-26

自从升级到1.5版后，我正在从AngularJS指令迁移到组件。X版本，并为随后的2.0迁移做准备。这基本上是一个平稳的过渡，但我正在努力弄清楚如何调用一个函数，并从我的组件控制器传递一个属性在我的页面控制器。

我在我的components.js文件中定义了一个组件

myApp.component('itemList', {
    bindings: {
        items: '<',
        setCurrentItem: '&'
    },
        templateUrl: 'templates/itemPicker.html',
        controller: function itemPickerController(){
        },
        controllerAs:  'pickerCtrl'
});

我有一个组件模板[templates/itemPicker.html] 

<ul>
    <li class="ng-repeat="item in pickerCtrl.items>
        <button type="button" ng-click="setCurrentItem(item)">
            {{item.name}}
        </button>
    </li>
</ul>

在我的页面控制器[ctrlPage]我有一个函数:

function setCurrentItem(item) {
    ...
}

我从数据库中加载条目数组，然后在我的page.html中使用如下组件显示它:

<item-list items="items"></item-list>

重复显示正确，但是点击按钮不调用页面中的setCurrentItem函数，我不确定我在这里错过了什么。

我一直在看'require'，并认为我应该将其添加到组件定义，

require: '^ctrlPage'

但我不确定这是否在正确的方向上，如果这是正确的下一步，其余的语法将是什么。

在你的ctrlPage的模板中，你需要钩住父控制器的setCurrentItem方法，你可以这样做:

<item-list items="items" set-current-item="ctrlPage.setCurrentItem(item)" ></item-list>

你也需要改变当你调用setCurrentItem和传递他一个散列像这样:

<button type="button" ng-click="setCurrentItem({item: item})">

相关文章：