The '&' in Angular 1.5 Components

Question

For a project I am working on, we've refactored some repetitive views and code out into Angular 1.5 components.

These components 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 component 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').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();
                });
        };
    }
})();

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 component? 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

Andrew Gray Andrew Gray · Accepted Answer · 2016-02-22T17:58:21

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 component, 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 components 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!

The '&' in Angular 1.5 Components

1 Answers