自从升级到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})">