Ravi K Chowdary February 2016

nothing display when create and use custom directive using angularjs

I am a beginner in angularjs and created a custom directive. when i used custom directive in div tag,nothing id displaying. Please look into the below code and suggest me how to do and what mistake i did here.

<body ng-app="x">

        <div test></div>
        <div class="any"></div>

        <script>

            var app = angular.module("x", []);

            app.directive("test", function(){

                return {
                    restrict: "A"
                    template: "<h1>custom Attribute</h1>"
                }

            });

            app.directive("any", function(){

               return {

                   restrict: "C" // class directive
                   template: "custom directive class"
               } 
            });

        </script>

    </body>

Answers


gr3g February 2016

<body ng-app="x">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

    <div test></div>
    <div class="any"></div>

    <script>

        var app = angular.module("x", []);

        app.directive("test", function(){

            return {
                restrict: "A",
                template: "<h1>custom Attribute</h1>"
            };

        });

        app.directive("any", function(){

           return {

               restrict: "C", // class directive
               template: "custom directive class"
           }; 
        });

    </script>

</body>

Remember opening your console when trying some code. (F12)


frishi February 2016

Just created a fiddle here: https://jsfiddle.net/frishi/nbe9hc32/2/

I am not sure what errors you are getting in your console, if any. Right off the bat, you are missing commas in your directive definition object.

.directive("test", function(){
return {
          restrict: "A", // <- missing comma
          template: "<h1>custom Attribute</h1>"
       }

 })

Look at the code in the fiddle and compare yours with it. That should fix your issue.

Post Status

Asked in February 2016
Viewed 1,301 times
Voted 9
Answered 2 times

Search




Leave an answer