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,在模板中使用蛇形大小写。这对于组件来说并不是什么新鲜事。 虽然不是您的问题,但我发现的一个相关问题是&
绑定需要属性回调带有括号。例如:update="vm.update"
将与 bindings : update : '='
一起使用,但不适用于 bindings : update : '&'
。使用括号,例如然后update="vm.update()"
将启用&
绑定,但将可以传递到vm.update()
的内容限制为范围内可用的内容。
请注意,这里使用的不是snake_case
,而是kebab-case
。以上是关于Angular 1.5 组件中的“&”的主要内容,如果未能解决你的问题,请参考以下文章