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) {
    ...
}

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

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

重复显示正确，但点击按钮并不会调用页面中的setCurrentItem功能，我不知道我在这里缺少什么。

我一直在寻找＆＃39;要求＆＃39;并认为我应该将其添加到组件定义中，

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指令到组件迁移，从组件

1 个答案: