CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Om3ga
Om3ga

Reputation: 32951

custom AngularJS directive not working

I am making a custom directive in AngularJS 1.4.3. Below is my directive code.

'use strict';

angular.module('psFramework').directive('psFramework', function () {
    return {
        transclude: true,
        scope: {

        },
        controller: 'psFrameworkController',
        templatesUrl: 'ext-modules/psFramework/psFrameworkTemplate.html'
    }
});

Here is my controller psFrameworkController

'use strict';

angular.module('psFramework').controller('psFrameworkController',
    ['$scope',
        function ($scope) {

        }
    ]);

My module psFrameworkModule

'use strict';

angular.module('psFramework', ['psMenu', 'psDashboard']);

And templates psFrameworkTemplate.html, which is very simple

<h1>Hello</h1>

When I put <ps-framework></ps-framework> tags in my index.html file then it somehow does not render the template.

Here is my index.html

<body class="container-fluid">
    <ps-framework></ps-framework>
</body>

Upvotes: 1

Views: 88

Answers (1)

michelem
michelem

Reputation: 14590

It's templateUrl NOT templatesUrl and I like to suggest to add the restrict property too:

'use strict';

angular.module('psFramework').directive('psFramework', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {

        },
        controller: 'psFrameworkController',
        templateUrl: 'ext-modules/psFramework/psFrameworkTemplate.html'
    }
});

Upvotes: 4

Related Questions