Angular 1.5 组件中的“&”

Posted

技术标签:

【中文标题】Angular 1.5 组件中的“&”【英文标题】:The '&' in Angular 1.5 Components 【发布时间】:2016-06-04 05:11:53 【问题描述】:

对于我正在进行的一个项目,我们将一些重复的视图和代码重构到 Angular 1.5 组件中。

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

我确保咨询了Angular 1.5 Documentation for Components,但是关于“&”分类器如何工作的部分特别模糊。我引用:

输出通过 & 绑定实现,作为组件事件的回调函数。

我发现这一段几乎没用;因此,在这种情况下,我不知道我是否正确使用了“&”绑定分类器。以下是我正在做的事情:

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

【问题讨论】:

不应该是onSave="vm.onSave()"吗? 已经修复。不过很好。 【参考方案1】:

答案 #1 - 是的,我正确使用了“&”。

答案 #2 - 我不知道如何您应该快速或轻松地解决这个问题。我出错的地方是我的子功能组件中的属性,在主要功能标记中!

我拥有的是:

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

应该是这样的:

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

我在 Angular 组件页面往下看时发现了这一点,它隐藏在一些源代码中。问题是,文档并没有明确说明您不能再从 small-pascal case 转到 serpent-case!

不过,我的问题已经解决了。一路蛇皮套!

【讨论】:

在 angular1 中,属性中从不支持骆驼大小写。所以像所有其他指令绑定一样, & 在定义中使用 camelCase,在模板中使用蛇形大小写。这对于组件来说并不是什么新鲜事。 虽然不是您的问题,但我发现的一个相关问题是&amp; 绑定需要属性回调带有括号。例如:update="vm.update" 将与 bindings : update : '=' 一起使用,但不适用于 bindings : update : '&amp;'。使用括号,例如然后update="vm.update()" 将启用&amp; 绑定,但将可以传递到vm.update() 的内容限制为范围内可用的内容。 请注意,这里使用的不是snake_case,而是kebab-case

以上是关于Angular 1.5 组件中的“&”的主要内容,如果未能解决你的问题,请参考以下文章

使用 Angular 1.5 组件的嵌套路由中的相对视图

Angular 1.5+ 组件可选单向绑定

在 Angular 的组件中插入 JavaScript

哪个 Angular 1.5 组件绑定类型更昂贵? '=' 还是'<'?

属性中的 Angular 1.5 组件表达式“未定义”

在 Angular 1.5 组件中使用 $emit