Using attributes as text in angular component

Question

I have this little component:

.component('obsbox', {
        restrict: 'E',
        templateUrl: 'app/components/interactions/html/interactions.obsBox.partial.html',
        controller: 'InteractionsController',
        controllerAs: 'vm',
        bindings: {}
    });

All it does it produce a box with some text in it. Nothing spectacular. What I'd like to do is pass a few attributes into the tag and then display those attributes when it resolves.

<obsbox title1="Positive" title2="Experience" score="1"></obsbox>

That should give me a box with "1" in at the top and "Positive Experience" in the bottom. I haven't been able to find anything on SO or anywhere else that explains how I would do that in a way I can understand.

There's nothing in my controller or anywhere else that would be helpful to show you. My controllers are literally doing nothing at the moment.

Any advice?

Edit: here's the html for the component:

<div layout="row" layout-align="start center" flex="11">
    <div layout="column" layout-align="center center" flex="100">
        <div layout="row" layout-align="center center" flex="100">
            1
        </div>
        <div layout="row" layout-align="center center" flex="100">
            <div layout="column" layout-align="center center" flex="100" style="font-size: x-small">
                <div layout="row" layout-align="center center" flex="100">
                    POSITIVE
                </div>
                <div layout="row" layout-align="center center" flex="100">
                    ATTITUDE
                </div>
            </div>
        </div>
    </div>
</div>

In my ideal world "1", "Positive", and "Attitude" would come from from attributes on the obsbox tag.

Answer 1

Have you seen the example at https://docs.angularjs.org/guide/component ?

You should fill your bindings like this:

bindings: {
title1:"@",
title2="@",
score="@"
}

@ denotes text binding. See the link above for more binding options.

You can then use {{ $ctrl.title1 }} and the other bindings in the template.

For an example, see https://plnkr.co/edit/Gv3TofiO0QyjAOkODjPv?p=info

Answer 2

You can load it into scope using a link function in your directive:

.component('obsbox', {
    // the other directive parameters

    link: (scope, element, attributes, controller) => {
        controller.title1 = attributes.title1;
        controller.title2 = attributes.title2;
    }
});

The link function is executed once, upon directive compilation.

If you need to update the value, you need to add a watch to that attribute. Angular provides a way to observe attributes with the $observe function:

// in the link function body
attributes.$observe('title1', newValue => {
    controller.title1 = newValue;
});

Note that this way, it's using plain strings, not Angular expressions. This means that if you want to have an expression, you would need the $parse service in the directive, or use interpolation at usage site.