Why directive name in javascript and html are different but it's still working?

Question

I recently started using angularjs, and I came across this sample of code:

// Code goes here

angular.module('Sojharo', [])
.directive('schrollBottom', function () {
  return {
    scope: {
      schrollBottom: "="
    },
    link: function (scope, element) {
      scope.$watchCollection('schrollBottom', function (newValue) {
        if (newValue)
        {
          $(element).scrollTop($(element)[0].scrollHeight);
        }
      });
    }
  }
})
.controller('MyController', function($scope) {

  $scope.messages = [{'msg':'a'},{'msg':'ab'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'last'}];
  //$scope.messages = [];
  $scope.im = {};

  $scope.sendIM = function(msg) {
    

    $scope.messages.push(msg);
    $scope.im = {};
    
    //$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
/*
    var chatBox = document.getElementById('chatBox');
    chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240);
    */
  }
});

#chatBox {
    overflow : auto;
    width : 80%;
    height : 150px;
    border: 1px solid;
    padding: 10px 10px 10px 10px;
}
.chatMessage {
    padding: 2px 40px;
    background: #ffffff;
    border-radius: 25px;
    text-align: left;
    margin-bottom: 8px;
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="Sojharo">
      <div ng-controller="MyController">
        <div id="chatBox" schroll-bottom="messages">
          <div ng-repeat="message in messages">
            <div class="chatMessage">
              <div class="messageTextInMessage">{{message.msg}}</div>
            </div>
          </div>
        </div>
        <div class="chatControls">
          <form ng-submit="sendIM(im)">
            <input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" />
          </form>

        Type and press Enter
      </div>
      </div>
    </div>
  </body>

</html>

If you noticed it, on the javascript, the directive is called schrollBottom but on the html code, the directive is called schroll-Bottom, and it's working! And if I remove this dash - from the html code in order to keep the same directive name as in the script, it stops working. What's going on? Can someone please explain me why it happens like this?

It is an angular convention. if the directive name is 'sampleDirective', you have to use it in html like 'sample-directive' — rtvalluri, Jan 28 '17 at 14:35

score 0 · Answer 1 · answered Jan 28 '17 at 14:34

You should use dash-separated names inside the html and camelCase for the corresponding name in the directive.

According to the Documentation

Directives have camel cased names such as ngBind. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _. Optionally the directive can be prefixed with x-, or data- to make it HTML validator compliant.

Why directive name in javascript and html are different but it's still working?

1 Answers1