Question

对于我正在进行的项目，我们重构了一些重复的视图并将代码重写为Angular 1.5组件。

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

我确保咨询Angular 1.5 Documentation for Components，但有关'＆amp;'的部分内容。分类器的工作特别模糊。我引用：

输出通过＆amp;绑定，作为组件事件的回调。

我发现这篇文章旁边没用了;结果我不知道我在使用'＆amp;'正确的绑定分类器，在这种情况下。这是我发生的事情：

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.

问题：：两倍。首先，我使用'＆amp;'正确绑定分类器，为我的子功能组件设置事件？其次，在目前的状态（这个），它不起作用 - 我不知道如何让它工作。当我关闭模态时，我应该怎么做才能确保我看到以下输出：

I see this
I should see this but do not

Answer 1

答案＃1 - 是的，我正在使用'＆amp;'正确。

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

我的意思是：

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

应该是什么：

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

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

尽管如此，我的问题已经解决了。一路蛇壳！

'＆amp;'在Angular 1.5组件中

1 个答案: