AngularJS 1.5 组件迁移指令，从组件调用页面函数答案

【问题标题】：AngularJS 1.5 Directive to Component migration, calling Page functions from ComponentAngularJS 1.5 组件迁移指令，从组件调用页面函数
【发布时间】：2016-11-05 13:32:31
【问题描述】：

自从升级到 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 函数，我不确定我在这里缺少什么。

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

require: '^ctrlPage'

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

【问题讨论】：

标签： javascript angularjs angular components angular2-directives

【解决方案1】：

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

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

您还需要在调用 setCurrentItem 时进行更改并向他传递这样的哈希：

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

【讨论】：

我应该在组件定义中添加 require: '^ctrlPage' 吗？如果是这样，那是正确的语法吗？
如果您使用组件绑定并将 ctrlPage 传递给 setCurrentItem 绑定，则不需要控制器。
这似乎只适用于嵌套在另一个组件中的组件，在我的情况下，我使用带有控制器的路由页面，然后在其中嵌套组件，以及从组件控制器到除非页面是组件，否则页面控制器似乎根本不起作用，而且我还不能开始将整个应用程序架构更改为组件，所以我似乎暂时被指令所困扰在这种情况下。
您仍然可以通过这种方式从组件中请求外部控制器：.component('myPane', { require: { tabsCtrl: '^myTabs' }, controller: function() { this.$onInit = function() { this.tabsCtrl.addPane(this); console.log(this); }; } }); 在这种情况下，您需要 myPane 组件中的 myTabs 控制器，只需在 $onInit 函数中使用它即可。 Angular 的版本必须 >= 1.5.3