Angular JS - custome directive is not getting replaced with actual template

StackOverflow https://stackoverflow.com/questions/22317650

  •  12-06-2023
  •  | 
  •  

Question

I am learning Angular JS and would like to create my custom directive. My javascript code is not showing any error but the custom directive is not getting replaced with my HTML template. Can you please guide on how to debug this issue or what is wrong with this code? jsFiddle link

<body ng-controller="customdirectivecontroller">
    <p>Placed custom directive here!</p>
    <mytextbox></mytextbox>
</body>

------------------
var customdirectiveapp = angular.module('customdirectiveapp', []);

customdirectiveapp.controller = ('customdirectivecontroller', function ($scope, $http) {
    $scope.name = "xxx";
});

customdirectiveapp.directive = ('mytextbox', function () {
    var directive = {};

    directive.restrict = 'E'; /* restrict this directive to elements */

    directive.template = "My first directive: ";

    return directive;
});
Was it helpful?

Solution

There are several errors in your code

1) your variable name is wrong at directive defination it was customdirectveapp but it should be customdirectiveapp

2) your directive definations are wrong you should define controller,directive... like this

customdirectiveapp.controller('customdirectivecontroller', function ($scope, $http) {
    ....
});

instead of this

customdirectiveapp.controller = ('customdirectivecontroller', function ($scope, $http) {
    ....
});

and here is working PLUNKER of your application

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top