Angular 1.5组件中的'&'

Question

对于我正在研究的项目,我们重构了一些重复的视图并将代码编写到Angular 1.5组件中.

这些组件专门打开一个Angular UI模式,当模态关闭时,应该在最上面的范围内执行一些回调.我们遇到的问题是,当我们关闭模态时,我们设置为回调的函数不会被调用.

我确保参考Angular 1.5 Documentation for Components,但关于'&'分类器如何工作的部分特别含糊.我引用:

输出通过&bindings实现,这些绑定用作组件事件的回调.

我发现这篇文章旁边没用了; 因此,在这种情况下,我不知道我正确使用'&'绑定分类器.这是我发生的事情:

MainFeature.html

<div ng-repeat="thing in vm.things">
    <sub-feature onSave="vm.onSave()" thing="thing"></sub-feature>
</div>

MainFeatureCtrl.js

(function () {
    'use strict';

    angular.module('app').controller('mainFeatureCtrl', [
        mainFeatureCtrl
    ]);

    function mainFeatureCtrl() {
        var vm = this;

        vm.onSave = function () {
            // Save stuff
            console.log('I should see this but do not.');
        };
    }
})();

SubFeatureCmpt.js

(function () {
    'use strict';

    angular.module('app').component('subFeature', {
        templateUrl: 'App/MainFeature/SubFeature/SubFeature.html',
        controller: 'subFeatureCtrl',
        controllerAs: 'vm',
        bindings: {
            thing: '=',
            onSave: '&'  // Point of contention - expression?
        }
    });
})();

SubFeature.html

<span ng-click="vm.edit()">{{vm.thing}}</span>

SubFeatureCtrl.js

(function () {
    'use strict';

    // subFeatureModalSvc is merely a service that lets me open
    // an Angular UI modal.  It is not necessary to include that
    // code for the purposes of my question.
    angular.module('app').controller('subFeatureCtrl', [
        'subFeatureModalSvc', subFeatureCtrl
    ]);

    function subFeatureCtrl(subFeatureModalSvc) {
        var vm = this;

        vm.edit = function () {
            subFeatureModalSvc.edit(vm.thing)
                .then(function () {
                    console.log('I do see this');
                    // This line is the problem line.
                    // I've verified that it's defined, and a function...
                    // The problem is it's not a callback to vm.onSave 
                    // as defined up in mainFeature.js!
                    vm.onSave();
                });
        };
    }
})();

在'确认'模态对话框时,此代码当前产生以下输出:

I see this.

问题:双重.首先,我是否正确使用'&'绑定分类器,为我的子功能组件设置事件？其次,在目前的状态(这个),它不起作用 - 我不知道如何让它工作.当我关闭模态时,我应该怎么做才能确保我看到以下输出:

I see this
I should see this but do not

Answer 1

答案#1 - 是的,我正确使用'&'.

答案#2 - 这是一个我不知道你应该如何快速或轻松地弄清楚的问题.我出错的地方是我的子要素组件中的属性,在主要功能标记中!

我有的是:

<sub-feature onSave="vm.onSave()" thing="thing"></sub-feature>

应该是什么:

<sub-feature on-save="vm.onSave()" thing="thing"></sub-feature>

我在Angular组件页面上稍微向下看了一下,它被隐藏在一些源代码中.问题是,文档并没有明确说明你不能再从小帕斯卡案到蛇案了!

尽管如此,我的问题已经解决了.一路蛇壳!