AngularJS: Custom Directives – Using Isolated Scope

by | Apr 6, 2015 | AngularJS

AngularJS_logo.svg

How do you pass data to your directive?

So now we have covered the most basic part of custom directives, and now you should learn how to pass data to it.

You can simple access the current scope from a controller and get the data this way.

JavaScript:

angular.module('app', [])
.controller('HelloWorldController', ['$scope',function($scope) {
    $scope.message = "This is a wonderful world we live in!"
}])
.directive('helloWorld', function () {
    return {
        restrict: 'E',
        templateUrl: 'template.html'
    };
});

Html Code:

    <body ng-controller="HelloWorldController">
        <hello-world></hello-world>
    </body>

Template:

Your message:
<b>{{message}}</b>

And then in your template you simply use the curly braces to display the message from the current scope. (more…)

Shares

Share