CODEWITHSUNDEEP
javascriptangularjs
user2991183
user2991183

Reputation: 683

How to pass data from directive to html template - AngularJS

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>

Upvotes: 1

Views: 1141

Answers (4)

sol4me
sol4me

Reputation: 15698

$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

Upvotes: 0

user2991183
user2991183

Reputation: 683

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;
  }
}

Upvotes: 1

Suneet Bansal
Suneet Bansal

Reputation: 2702

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;  

    }

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can assign you variable to scope, like this 

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

Upvotes: 2

Related Questions