The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Angular Directives

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #200183

    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:
    &lt;app-info info="move"&gt;&lt;/app-info&gt;

    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: '='




    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() {...

    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)



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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.