AngularJS variable from controller to directive

Question

I would like to ask you if it is possible, and if yes, then how can I pass some variable from controller to directive. Here is a bit of my code:

app.js

var VirtualGallery = angular.module('virtualGallery', ['VirtualGalleryControllers', 'ngRoute']);

VirtualGallery.constant('apiURL', 'roomPicture');

VirtualGallery.run(['$rootScope', function ($rootScope) {
    $rootScope.roomPictures = [];
}]);

var VirtualGalleryControllers = angular.module('VirtualGalleryControllers', ['ngRoute']);

VirtualGalleryControllers.controller('AppCtrl', function ($http, $rootScope, $scope, apiURL, $q) {
$scope.getallrooms = function () {
    $http.get(apiURL)
        .success(function (data) {
            $rootScope.roomPictures = data; //idk whether to use $scope or $rootScope
        });
    };
});

In this app.js I'm trying to get some data from DB, and that data I need to use in directive.

Directive

angular.module('virtualGallery')
    .directive('ngWebgl', function () {
    return {
        restrict: 'A',
        scope: {
            'getallrooms': '=',
            'roomPictures': '='
        },
        link: function postLink(scope, element, attrs) {
            scope.init = function () {
                //here I would like to be able to access $scope or $rootScope from app.js file.
             };
          }
       };
    });

In directive I need to gain access to $scope or $rootScope in function init() where I need to use that data.

HTML

 <body ng-app="virtualGallery">
 <div class="container" ng-controller="AppCtrl">

<div
    id="webglContainer"
    ng-webgl
    getallrooms="getallrooms"
    roomPictures="roomPictures"
    ></div>
  <p ng-model="roomPictures"></p>
  <p ng-model="getallrooms"></p>
</div>
<script type="text/javascript" src="js/vg.js"></script>
<script type="text/javascript" src="js/ngWebgl.js"></script>

In html I'm trying to pass that data from app.js to directive.

Im quite new to Angular and this is even my first directive, so I am bit confused. Every help will be appreciated. Thanks guys :)

Mohit Yadav · Accepted Answer · 2016-07-30 11:06:42Z

1

In your app.js use the controller like this

VirtualGalleryControllers.controller('AppCtrl', function ($http, $rootScope, $scope, apiURL, $q) {
$scope.getallrooms = function () {
    $http.get(apiURL)
        .success(function (data) {
            $scope.roomPictures = data; //use $scope instead of  $rootScope
        });
    };
});

Then for your directive:

angular.module('virtualGallery')
.directive('ngWebgl', function () {
  return {
    restrict: 'A',
    scope: {
        pictures: '=virtualGallery'
    },
    link: function postLink(scope, element, attrs) {
        scope.init = function () {
            // you can access the variable through the scope
            scope.pictures;
         };
    }
  };
});

Or you could simply make the http request in your directive and manipulate the data there.

answered Jul 30, 2016 at 11:06

Mohit Yadav

1561 silver badge8 bronze badges

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

3 Comments

xmigas Over a year ago

Thanks, I moved the http request in directive. And it worked. I hope it will do the thing I want to :)

xmigas Over a year ago

And I have one more question. Now when I got the data by http request, how can I pass these data to my html.file ?(template)

Mohit Yadav Over a year ago

Just add the data to the scope and access it as an angular variable in double curly braces or using ng-bind

Abdennacer Lachiheb · Accepted Answer · 2016-07-30 10:57:23Z

1

You can inject $rootScope to your directive ( like you did in your controller ) and then access that rootScope variable.

answered Jul 30, 2016 at 10:57

Abdennacer Lachiheb

4,9689 gold badges35 silver badges66 bronze badges

Collectives™ on Stack Overflow

AngularJS variable from controller to directive

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related