CODEWITHSUNDEEP
javascripthtmlangularjs
xmigas
xmigas

Reputation: 131

AngularJS variable from controller to directive

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 :)

Upvotes: 0

Views: 78

Answers (2)

Mohit Yadav
Mohit Yadav

Reputation: 156

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.

Upvotes: 1

Abdennacer Lachiheb
Abdennacer Lachiheb

Reputation: 4888

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

Upvotes: 1

Related Questions