Angularjs directive live binding between variable and css property

Question

I would like to live update a div element css property (min-height) in the HTML, if I change a controller variable (the variable contains the height in px, lets say 445).

The problem is, the variable in the directive is always undefined. I tried with $watch also, but still does not work.

Here is a jsfiddle demo: http://jsfiddle.net/xs0upf20/

Here is the sourcecode:

<div ng-app="ctrl">
  <div ng-controller="TempCtrl">
    <span temp-directive>here we go</span>
  </div>
</div>

JS:

angular.module('ctrl', []).controller('TempCtrl', function ($scope, $location, $rootScope) {
         $scope.sideheight = 445;
     });

     angular.module('ctrl').directive('tempDirective', function () {
         return {
             restrict: 'A',
             scope: {
                 sideheight: '=sideheight'
             },
             link: function (scope, element, attrs) {
                 console.log('outside watch');
                 console.log(scope.sideheight);
                 element.css('min-height', scope.sideheight+'px');
                 scope.$watch("onlyvariable", function(newValue,oldValue,scope){
                     console.log('inside watch');
                     console.log(scope);
                 });

             }
         };
     });

The sideheight variable is initialized with a default value (what I can not access already), and later if I change the variable I would like to see the css property updated.

I also tried '=', '@' binding, still no success. With @ binding, the variable is not even created in scope object, with = char, it has an undefined value. The $parent object does contain the sideheight variable, with the correct 445 value.

Any help is much appreciated.

Ben Jaspers · Accepted Answer · 2015-03-17 18:24:24Z

3

You need to pass the sideheight from the controller into the directive, like so:

<div ng-app="ctrl">  
    <div ng-controller="TempCtrl">
        <span temp-directive sideheight="sideheight">here we go</span>
    </div>      
</div>

The directive's scope does not inherit sideheight from the controller, you must tell the directive what property or value on the controller the sideheight property takes.

answered Mar 17, 2015 at 18:24

Ben Jaspers

1,5461 gold badge10 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Angularjs directive live binding between variable and css property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related