对于我正在从事的一个项目,我们重构了一些重复的 View 并将代码输出到 Angular 1.5 组件中。
这些组件专门打开一个 Angular UI 模态框,当模态框关闭时,它应该在最上层的范围内执行一些回调。我们遇到的问题是,当我们关闭模式时,我们设置为回调的函数不会被调用。
我一定要咨询 Angular 1.5 Documentation for Components ,但是关于“&”分类器如何工作的部分特别模糊。我引用:
Outputs are realized with & bindings, which function as callbacks to component events.
我发现这段话几乎没用;因此,在这种情况下,我不知道我是否正确使用了“&”绑定(bind)分类器。这是我正在做的事情:
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.
问题::双重的。首先,我是否正确使用“&”绑定(bind)分类器来为我的子功能组件设置事件?其次,在目前的状态下(这个),它不工作——我不知道如何让它工作。我应该怎么做才能确保在关闭模式时看到以下输出:
I see this
I should see this but do not
最佳答案
答案 #1 - 是的,我正确地使用了“&”。
答案 #2 - 这是一个我不知道您应该如何快速或轻松解决的问题。我出错的地方是我的子功能组件中的属性,在主要功能标记中!
我得到的是:
<sub-feature onSave="vm.onSave()" thing="thing"></sub-feature>
它应该是:
<sub-feature on-save="vm.onSave()" thing="thing"></sub-feature>
我通过进一步查看 Angular 组件页面发现了这一点,它隐藏在一些源代码中。问题是,文档没有明确说明您不能再从 small-pascal 案例转到 serpent-case!
尽管如此,我的问题还是解决了。一路蛇形!
关于javascript - Angular 1.5组件中的 '&',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35559354/