How to implement custom directive in angular js?

Question

I tried to build a custom 'button' directive with the following code.But some where it went wrong could you please help me to sort it out.and here I am attaching code snippet to get a clear picture. Thanks in Advance.

<html>

<head>
    <title>Custom Directives</title>
</head>

<body>
<h2>AngularJS</h2>

<div ng-app = "mainApp" ng-controller = "ButtonController">
    <myButton name="Sai"></myButton><br/>
    <myButton name="Bharat"></myButton>
</div>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.directive('myButton', function() {
        var directive = {};
        directive.restrict = 'E';
        directive.transclude = true;
        directive.template = "<button>{{myButton.name}}</button>";


        directive.scope = {
            myButton : "=name"
        }

        directive.compile = function(element, attributes) {
            element.css("border", "1px solid #cccccc");

            var linkFunction = function($scope, element, attributes) {
                element.html("<button> $scope.myButton.name </button>");
            }
            return linkFunction;
        }

        return directive;
    });

    mainApp.controller('ButtonController', function($scope) {
        $scope.Sai = {};
        $scope.Sai.name = "Sai";

        $scope.Bharat = {};
        $scope.Bharat.name = "Bharat";

    });

</script>

</body>
</html>

Anik Islam Abhi · Accepted Answer · 2015-11-28 05:32:46Z

2

You are declaring directive in wrong way in html.

html name should be snake-case like this

<my-button name="Bharat"></my-button>

JSFIDDLE

edited Nov 28, 2015 at 5:32

answered Nov 28, 2015 at 5:23

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BHARAT ATHOTA Over a year ago

do i need to change directive name also ?

Anik Islam Abhi Over a year ago

nope directive name should be camel case. check my fiddle that i added in the answer @BHARATATHOTA

BHARAT ATHOTA Over a year ago

In your example it adds a button element inside <my-button> tag.How can i implement <my-button> tag is completely replaced by template.

Collectives™ on Stack Overflow

How to implement custom directive in angular js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related