directive to update when element visible

[Ali Abedi]

I'm trying to setup a directive that runs a function every time it's DOM element is visible.  At the start of the app, by default, the elements are hidden.  When the element is shown I would like the function to run.  I've been trying something like this with no luck.  What am I doing wrong?  Thanks!

.directive('customScrollbar', function () {

return function(scope, elm, attrs) {

elm.bind('show', function() {

// run this

});

};

});

[Peter Bacon Darwin]

Looks reasonable.  I assume that what you mean by "having no luck" is that the link function run but the show handler is never called?

What is the element you are binding to?  Does it expose the show event?

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ali Abedi]

Yea, sorry.  It's not calling the function.  The html looks like so:

<div ng-controller="parentController">

  <div id="loadModal" ui-modal class="fade no-modal-backdrop" data-backdrop="static" ng-model="hide">

    <div class="selectList" id="scrollList" custom-scrollbar>

    </div>

  </div>

</div>

now if I setup a function in the controller that's binded to the modal showing or not, the below directive works.  However that's far from an ideal solution.  Not sure where I'm going wrong here.

.directive('customScrollbar', function () {

  return function(scope, elm, attrs) {

    scope.$watch( 'isShown()', function(val) {

      // Works here

    });

});

[Peter Bacon Darwin]

I think your problem is that there is no native "show" event.  So you are binding to something that never is triggered.

[Ali Abedi]

Sorry to bring this up again, but I put the project on hold for a while and I'm back at it.  So there is no way to bind to render events in angularjs like there is in batmanjs or emberjs?

[Peter Bacon Darwin]

How about binding to 

scope.$watch(function() { return element.is(':visible'), function() { ... });

[Hendrik P]

Based on this article, I found a solution for a similar problem. As a reference, I'm adding it here. Maybe it can help others.

This directive vertically aligns a modal window when it appears and repositions it when the windows resizes.

DISCLAIMER: I'm pretty new to Angular, so this could contains incorrect methodology. Feel free to give feedback if so.

angular.module('app.commonDirectives').directive(
    'centerAlign',
    function () {
        return {
            restrict: 'A',
            controller: ['$scope', '$window', function($scope, $window){
                $scope.innerHeight = $window.innerHeight;

                angular.element($window).bind('resize', function () {
                    $scope.recalculateAlignment();
                });

                $scope.getWindowInnerHeight = function(){
                    return $window.innerHeight;
                };
            }],
            link: function ($scope, $element, attr){

                $scope.recalculateAlignment = function () {
                    var $modalContent = angular.element($element[0].querySelector('.modal-dialog')),
                        clientHeight = $modalContent[0].clientHeight + 60, // 30px margin on both sides taken into account
                        windowInnerHeight = $scope.getWindowInnerHeight(),
                        offsetHeight = windowInnerHeight - clientHeight;

                    $element.css('margin-top', String((offsetHeight / 2)) + 'px');
                };

                // add watch on ngShow attribute to trigger repositioning when modal becomes visible (which is required to retrieve height of modal content)
                $scope.$watch(attr.ngShow, function() {
                    $scope.recalculateAlignment();
                });
            }
        };
    });