angularjs directive not working (strange issue)

Question

This is my app.js code (main js)

var currentUserId;
window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile',
    'myApp.Registermdl',
    'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.createMap', 'ui.bootstrap',
'myApp.logout', 'myApp.viewCollege']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/login', { templateUrl: 'app/Login/login.html', controller: 'LoginCtrl' });
    $routeProvider.when('/home', { templateUrl: 'app/Home/home.htm', controller: 'HomeCtrl' });
    $routeProvider.when('/createuser', { templateUrl: 'app/CreateUser/createUser.html', controller: 'CreateUserCtrl' });
    $routeProvider.when('/signup', { templateUrl: 'app/Register/register.html', controller: 'RegisterCtrl' });
    $routeProvider.when('/logout', { templateUrl: 'app/Login/login.html', controller: 'LogoutCtrl' });
    $routeProvider.when('/view-map', { templateUrl: 'app/ViewMap/viewmap.html', controller: 'ViewMapCtrl' });
    $routeProvider.when('/create-map', { templateUrl: 'app/CreateMapAddress/create-mapaddress.html', controller: 'CreateMapAddressCtrl' });
    $routeProvider.when('/view-college', { templateUrl: 'app/ViewColleges/viewcolleges.html', controller: 'ViewCollegeCtrl' });
    $routeProvider.otherwise({ redirectTo: '/login' });
}]).directive("collegeAppMain", function ($location) {
    return {
        restrict: "A",
        link: function (scope) {
            scope.getClass = function (path) {
                if ($location.path() == path) {
                    return "active"
                } else {
                    return ""
                }
            }
        }
    };
});

This is my directive code

directive("collegeAppMain", function ($location) {
        return {
            restrict: "A",
            link: function (scope) {
                scope.getClass = function (path) {
                    if ($location.path() == path) {
                        return "active"
                    } else {
                        return ""
                    }
                }
            }
        };
    });

I have called this collegeAppMain directive in my index page

<body>
    <nav class="navbar navbar-default nav-custom" **collegeAppMain** role="navigation"></nav>
.
.
.
.
.</body>

It is not working. But if i change the directive name collegeAppMain to "dfhsfksksdf"

then it's working. I want to work with this collegeAppMain name

I am confused with this. Please tell me it why? How can i solve this problem?

Why its working if i gave the directive name is 'dfhsfksksdf' and why it's not working if i gave the directive name is 'collegeAppMain '?

You named directive with camelCase name `collegeAppMain` so wehn you call it in html you need `
` You can find it in [documentation](https://docs.angularjs.org/guide/directive) — lisowski.r, Jun 25 '14 at 07:17

score 0 · Accepted Answer · edited May 23 '17 at 12:29

when naming a directive using camelCase, the directive should be called from HTML like this: camel-case.

in your case, html should look like this:

    <nav college-app-main class="navbar navbar-default nav-custom"  role="navigation"></nav>

take a look at this answer.

for farther information about directives you can look at this tutorial.

another thing to consider is re-formatiing the code. $routeprovider uses 'method chaining', so you can write your code like this:

myApp.config(['$routeProvider', function ($routeProvider) {
   $routeProvider
     .when('/login', { 
         templateUrl: 'app/Login/login.html', 
         controller: 'LoginCtrl' })
      .when('/home', { 
         templateUrl: 'app/Home/home.htm', 
         controller: 'HomeCtrl' })
      .otherwise({
         templateUrl: 'some.html', 
         controller: 'Home2Ctrl'
      })
});

it's alot easier on the eyes.

take a look at this short video tutorial by EggHead

angularjs directive not working (strange issue)

1 Answers1