Thursday, December 10, 2015

AngularJS - How to write a custom directive ?

index.html
-----------------------------------

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
    <script src="app.js"></script>

    <body ng-app="sampleApp">
            <div ng-controller="MyController" >
         
            <jaffa>Still you see this text ?  It means your custom directive is not in action.. Go and fix it what are you looking at. .... :)</jaffa>
            </div>
    </body>
</html>




app.js
---------------------


var myApp = angular.module('sampleApp', []);

myApp.controller('MyController', function ($scope) {
    $scope.textToInsert = ' Good Job Boss !'
   
});

myApp.directive('jaffa', function() {
    var directive = {};

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

    directive.template = "My first directive: {{textToInsert}}";

    return directive;
});

No comments:

Post a Comment