admin管理员组文章数量:1323157
For a project I am working on, we've refactored some repetitive views and code out into Angular 1.5 ponents.
These ponents specifically open an Angular UI modal, which when the modal is closed, should perform some callback on the uppermost scope. The problem we are encountering, is that when we close our modal, the function we set as a callback does not get called.
I made sure to consult the Angular 1.5 Documentation for Components, but the part about how the '&' classifier works is particularly vague. I quote:
Outputs are realized with & bindings, which function as callbacks to ponent events.
I found this passage next to useless; as a result I do not know that I am using the '&' binding classifier correctly, in this case. Here's what I've got going on:
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')ponent('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();
});
};
}
})();
This code currently yields the following output upon 'confirming' the modal dialog:
I see this.
Question:: Twofold. First, am I using the '&' bindings classifier correctly, to set up an event for my Sub-Feature ponent? Secondly, in its current state (this one), it is not working - I do not know how to get it working. What should I do to ensure that, when I close the modal, that I see the following output:
I see this
I should see this but do not
For a project I am working on, we've refactored some repetitive views and code out into Angular 1.5 ponents.
These ponents specifically open an Angular UI modal, which when the modal is closed, should perform some callback on the uppermost scope. The problem we are encountering, is that when we close our modal, the function we set as a callback does not get called.
I made sure to consult the Angular 1.5 Documentation for Components, but the part about how the '&' classifier works is particularly vague. I quote:
Outputs are realized with & bindings, which function as callbacks to ponent events.
I found this passage next to useless; as a result I do not know that I am using the '&' binding classifier correctly, in this case. Here's what I've got going on:
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').ponent('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();
});
};
}
})();
This code currently yields the following output upon 'confirming' the modal dialog:
I see this.
Question:: Twofold. First, am I using the '&' bindings classifier correctly, to set up an event for my Sub-Feature ponent? Secondly, in its current state (this one), it is not working - I do not know how to get it working. What should I do to ensure that, when I close the modal, that I see the following output:
I see this
I should see this but do not
Share
edited Feb 22, 2016 at 17:29
Andrew Gray
asked Feb 22, 2016 at 16:55
Andrew GrayAndrew Gray
3,7903 gold badges42 silver badges78 bronze badges
2
-
1
Shouldn't it be
onSave="vm.onSave()"
? – elclanrs Commented Feb 22, 2016 at 16:59 - Already fixed. Good catch, though. – Andrew Gray Commented Feb 22, 2016 at 16:59
1 Answer
Reset to default 9Answer #1 - Yes, I was using '&' correctly.
Answer #2 - This was a problem that I don't know how you're supposed to figure out quickly or easily. Where I went wrong was in the attribute in my sub-feature ponent, in the main feature markup!
What I had was:
<sub-feature onSave="vm.onSave()" thing="thing"></sub-feature>
What it should've been was:
<sub-feature on-save="vm.onSave()" thing="thing"></sub-feature>
I found this out from looking a little further down on the Angular ponents page, and it was buried in some source code. The problem is, the documentation does not plainly state that you can no longer go from small-pascal case to serpent-case!
Nonetheless, my issue is solved. Snake-case all the way!
本文标签: javascriptThe 39amp39 in Angular 15 ComponentsStack Overflow
版权声明:本文标题:javascript - The '&' in Angular 1.5 Components - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742143017a2422666.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论