如何将数据从指令传递到html模板 - 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>

Answer 1

You can assign you variable to scope , like this

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

Answer 2

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

Answer 3

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

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. Eg

 .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

Answer 4

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;  

    }