Angular Directives

[Jerba]

I’m currently in the process of teaching myself AngluarJS using CodeAcademy, anyway, here’s the structure of the directive.

app.directive('appInfo', function() {

    return {

        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: 'js/directives/appInfo.html'

    };

});

here’s the template:

<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p

as well as a piece of data from the controller:

$scope.move = {
    icon: 'img/move.jpg',
    title: 'MOVE',
    developer: 'MOVE, Inc.',
    price: 0.99
};

Now, when in my markup I can use:
<app-info info="move"></app-info>

My question is, where is the ‘app-info’ coming from?

is it because ‘app’ (referring to the whole application) and ‘info’ which is set as the scope here?

scope: {
  info: '='
},

Thanks

[Alen]

@jerba

is it because ‘app’ (referring to the whole application) and ‘info’ which is set as the scope here?

info is just a property on the scope. app-info is coming from the directive declaration “appInfo”.

app.directive('appInfo', function() {...

[Alen]

am I completely misunderstanding this

Nope, you got it — it’s called attribute normalization.

So Angular will strip these and convert them to camelCase.

• app-info, becomes appInfo
• x-app-info, becomes appInfo
• data-app-info, becomes appInfo

You can also use:

• app:info or app_info, all of these will be converted or normalized

You just need to decide what convention you wish to use, Angular doesn’t make any assumptions, it tries to make everyone happy.

See Angular Documentation (scroll to Normalization)

[MattR]

Jerba,

Disregard, the editor wasn’t updating because the chapter was done!

[Author]

Posts