How to get directive's scope value to the controller in angularjs

Question

I have the directive that find the elements height and need to have the same value to the controller from the directive. I tried the below mentioned code and i could not find the solution, am facing some issues.

Could anyone help me on this?

HTML

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="controller.js"></script>
  </head>
  <body ng-app="myModule">
   <div myDirective style="height: 300px;" ng-controller="myheight">
     {{numvalue()}}
    </div>
  </body>
</html>

script.js for directive

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

contoller.js for controller

angular.module('myModule', []).controller("myheight", function($scope){

    $scope.numvalue = function(){

        $scope.divHeight  =  $scope.height;

        return $scope.divHeight;

    }

});

where is directive in html code?

ngLover
– ngLover

2015-12-04 05:41:25 +00:00
Commented Dec 4, 2015 at 5:41 — ngLover
– ngLover, Commented Dec 4, 2015 at 5:41
@ngLover, please see my updated code..

User123
– User123

2015-12-04 05:43:05 +00:00
Commented Dec 4, 2015 at 5:43 — User123
– User123, Commented Dec 4, 2015 at 5:43

Aakash · Accepted Answer · 2015-12-04 06:32:23Z

1

You don't need $scope.numvalue();

Your directive looks fine. Just add it to the html and change code to following.

<div ng-app="myModule">
  <div style="height: 300px;" my-directive ng-controller="myHeight">
    Getting height {{height}}
  </div>
</div>

JSFiddle

--EDIT--

Check the updated fiddle

JSFiddle

edited Dec 4, 2015 at 6:32

answered Dec 4, 2015 at 5:43

Aakash

1,8211 gold badge15 silver badges21 bronze badges

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

1 Comment

User123 Over a year ago

I need to have this height value to my controller i need to do some operation over there. any help pls

ngLover · Accepted Answer · 2015-12-04 05:44:40Z

0

just expose a varible of controller to the directive. after compilation process of the directive you can access the scope variable divHeight in your controller.

  angular.module('myModule', [])
      .directive('myDirective', function($timeout) {
        return {
            restrict: 'A',
            scope:{
              divHeight: '='
            },
            link: function(scope, element) {
                scope.divHeight = element.prop('offsetHeight');
                scope.width = element.prop('offsetWidth');
            }
        };
      });

HTML

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="controller.js"></script>
  </head>
  <body ng-app="myModule">
   <div myDirective div-Height="divHeight" style="height: 300px;" ng-controller="myheight">
     {{numvalue()}}
    </div>
  </body>
</html>

answered Dec 4, 2015 at 5:44

ngLover

4,6183 gold badges23 silver badges42 bronze badges

2 Comments

User123 Over a year ago

why you have used 'div-Height="divHeight"' and could you please let me know what is the use of it?

ngLover Over a year ago

it means i'm passing a variable from directive to controller if i change value in directive it will be reflected same as in controller

Collectives™ on Stack Overflow

How to get directive's scope value to the controller in angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related