AngularJS 1.5 Component迁移指令，从Component调用Page函数

Question

升级到 1.5.x 版本后，我正在从 AngularJS 指令迁移到组件，并为接下来的 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'

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

Answer 1

在您的 ctrlPage 模板中，您需要挂钩父控制器的 setCurrentItem 方法，您可以这样做：

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

当你调用 setCurrentItem 并向他传递一个散列时，你还需要更改，如下所示：

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

AngularJS 1.5 Component迁移指令，从Component调用Page函数

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

javascript

components

angularjs

angular2-directives

angular