Access AngularJs directive variable inside controller

Question

I'm little bit new to Angularjs. What I want is access "$scope.myVar" variable inside 'myController' controller. It would be great help if you can provide a solution.

angular.module('myDirective', [])
        .controller('myController', ['$scope', function ($scope) {
               
            }])
        .directive('myDirective', function () {           
            return {
                scope: {
                    myVar: '='                  
                },
                controller: function ($scope) {  
                    $scope.myVar = 'xyz';
                    alert($scope.myVar);
                }
            };
        });

<html lang="en-US">  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="newjavascript.js"></script>
    <body ng-app="myDirective">   
        <div ng-controller="myController">
            <my-directive></my-directive>>
        </div>
    </body>
</html>

Vivek · Accepted Answer · 2015-12-16 06:02:30Z

13

You just create a myVar variable in your controller and pass it to the directive using my-var attribute.

In your myController, Define myVar as

$scope.myVar= "Hello"

I your DOM, pass it to the directive as

<my-directive my-var="myVar"></my-directive>

Since you are using two way binding, any changes made to myVar by the directive are available in your controller.

You can put a watch on myVar to track the changes.

answered Dec 16, 2015 at 6:02

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

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

1 Comment

Trevor Over a year ago

Thanks a lot, I was scratching my head for ages and this was the missing link (you need bind data between the directive and parent controller via the attribute)

Vijay Shegokar · Accepted Answer · 2015-12-16 06:15:44Z

10

angular.module('myDirective', [])
        .controller('myController', ['$scope', function ($scope) {
               $scope.show = function() {
                   alert($scope.myVar);
               }; 
            }])
        .directive('myDirective', function () {           
            return {
                scope: {
                    myVar: '='                  
                },
                controller: function ($scope) {  
                    $scope.myVar = 'xyz';
                    alert($scope.myVar);
                    $scope.$parent.myVar = $scope.myVar; // here you can access the controller scope by using $parent
                }
             };
        });

answered Dec 16, 2015 at 6:15

Vijay Shegokar

2,5201 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Access AngularJs directive variable inside controller

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related