javascript - The '&' in Angular 1.5 Components - Stack Overflow

admin管理员组

文章数量:1324230

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

• javascript
• angularjs
• ponents

Share Follow edited Feb 22, 2016 at 17:29 Andrew Gray asked Feb 22, 2016 at 16:55 Andrew GrayAndrew Gray 3,79033 gold badges4242 silver badges7878 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Answer #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