How to pass data from directive to html template - AngularJS

Question

In my directive:

angular.module('myPopUp',[])
.directive('myPopUp',['$document', function($document){

    return{
        restrict: 'EA',
        controller: function($scope){
        },
        scope: {

        },
        templateUrl: 'popup.html',
        link: function(scope, elm, attr){
        var topPosition = top + (btnHeight/2) - (popOverHeight/2);

        }

After doing the calculation in link, how can I pass 'topPosition' to my popup.html template? Any ideas?

I try to do in this way, but it doesn't work.

popup.html:

<div class="popover right" style="width:auto;top:{{topPosition}}px;">
      <div class="arrow"></div>
      <div>.......</div>
    </div>

Oleksandr T. · Accepted Answer · 2015-01-17 08:41:40Z

2

You can assign you variable to scope, like this

link: function(scope, elm, attr) {
    var topPosition = top + (btnHeight/2) - (popOverHeight/2);
    scope.topPosition = topPosition;
}

edited Jan 17, 2015 at 8:41

answered Jan 17, 2015 at 8:31

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

user2991183 · Accepted Answer · 2015-01-19 02:49:07Z

1

Problem solved. I added $apply to my codes:

link: function(scope, elm, attr) {
var topPosition = top + (btnHeight/2) - (popOverHeight/2);
 scope.$apply(function() {
    scope.topPosition = topPosition;
  }
}

answered Jan 19, 2015 at 2:49

user2991183

6831 gold badge12 silver badges23 bronze badges

Comments

Suneet Bansal · Accepted Answer · 2015-01-17 09:11:53Z

0

You can refer only scope variables in your template so your scope should have topPosition.

  link: function(scope, elm, attr){
            var topPosition = top + (btnHeight/2) - (popOverHeight/2);
            scope.topPosition = topPosition;  

    }

answered Jan 17, 2015 at 9:11

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

Comments

sol4me · Accepted Answer · 2015-01-19 08:33:01Z

$scope in contoller and scope in link are the same thing. Only difference is that $scope is injected via Dependency Injection whereas in link fxnscope is injected based on position. So for e.g.

link: function(element, scope, attr)

then element will still refer to scope.

so inside your link function you can assign position to scope like you will assign it in controller only difference is the variable name. E.g.

 .directive('myPopUp', function(){

        return{
            restrict: 'EA',
            controller: function($scope){
                $scope.topPosition = 0; 
            },
            scope: {

            },
            templateUrl: 'popup.html',

            link: function(scope, elm, attr){
                scope.topPosition = 200; // calculate here as per your logic
            }}});

demo

thanks for your answer, however it still doesn't work. Am i missing anything? I have tried to add scope: { topPosition: '@' }, but still not working....any ideas?

Collectives™ on Stack Overflow

How to pass data from directive to html template - AngularJS

4 Answers 4

Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Related