AngularJs share $scope between controller and controller

Question

I can't understand why I can't access to $scope properties from the directive, the documentation says that directives doesn't create new scopes, so why can't I acess the $scope properties?

at app.js

'use strict';

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

climbingApp.controller('ctrl', function($scope) {

    $scope.initLocation = {
        lat: -54.798112,
        lng: -68.303375
    };

at google-map.js

'use strict';

climbingApp.directive('gmap', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div id="map-canvas"></div>',
            link: function(scope, iElement, attrs) {
                console.log(scope.initLocation);
            },
        }

    })

at index.html

  <html ng-app="climbingApp">
     <body>
    <gmap></gmap>

    </body>
    </html>

<script src="//code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>

<script src="app/app.js"></script>
<script src="app/dependencies/google-maps.js"></script>

The console.log always returns undefined.

tymeJV · Accepted Answer · 2013-09-24 20:50:28Z

2

You need to inject the scope into the controller

climbingApp.controller('ctrl', function($scope) {

answered Sep 24, 2013 at 20:50

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Buu · Accepted Answer · 2013-09-24 21:23:32Z

1

You have to associate the controller with the view (if you use ngRoute) or an element using ng-controller. Something like this:

<body ng-controller="ctrl">...</body>

answered Sep 24, 2013 at 21:23

Buu

50.5k6 gold badges72 silver badges85 bronze badges

Comments

Thomas Pons · Accepted Answer · 2013-09-24 20:51:04Z

0

Inject the $scope in your controller like that :

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


    climbingApp.controller('ctrl', function($scope) {

        $scope.initLocation = {
            lat: -54.798112,
            lng: -68.303375
        };

        $scope.markers = [
            {
                'title' : 'prueba',
                'position' : [-54.798112, -68.303375] 
            },
            {   
                'title': 'prueba', 
                'position': [-54.798212, -68.303375] 
            }
        ];
    });


    'use strict';

    climbingApp.directive('gmap', function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<div id="map-canvas"></div>',
                link: function(scope, iElement, attrs) {
                    console.log(scope.initLocation);
                },
            }

        })

working plunkr here : http://plnkr.co/edit/fiK5viToLOVGobnAKZtB?p=preview

The log appears.

$scope or $location have to be pass in the function of your controller as param.

answered Sep 24, 2013 at 20:51

Thomas Pons

7,7293 gold badges40 silver badges55 bronze badges

6 Comments

Thomas Pons Over a year ago

Because if you see your controller in the callback function you have no params. But in your controller you're using $scope. And in AngularJS if you want to use the $scope you have to pass it in param of the controller function. Do you understand it ?

Facu Ferrari Over a year ago

Yeah, of course, I've injected the $scope into the 'ctrl' controller and it didn't work

Thomas Pons Over a year ago

If you have done it correct your post so because in your post is missing and post your real code too ! I'll help you

Facu Ferrari Over a year ago

I've edited the post, that is the code that I've have now and it return me undefined on scope.initLocation but it return me an object on scope

Thomas Pons Over a year ago

Can you post the html and the router too please ?

|

Collectives™ on Stack Overflow

AngularJs share $scope between controller and controller

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related