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();
});
}
};
});
On Tuesday, March 5, 2013 at 11:06:30 AM UTC+1, Pete Bacon Darwin wrote:
>
> How about binding to
>
> scope.$watch(function() { return element.is(':visible'), function() { ...
> });
>
>
> On 5 March 2013 00:09, Ali Abedi <[email protected] <javascript:>> wrote:
>
>> 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?
>>
>>
>> On Friday, February 1, 2013 3:39:26 AM UTC-8, Peter Bacon Darwin wrote:
>>
>>> I think your problem is that there is no native "show" event. So you
>>> are binding to something that never is triggered.
>>>
>>>
>>> On 1 February 2013 10:52, Ali Abedi <[email protected]> wrote:
>>>
>>>> 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
>>>> });
>>>> });
>>>>
>>>>
>>>>
>>>> On Friday, February 1, 2013 2:32:36 AM UTC-8, Peter Bacon Darwin wrote:
>>>>
>>>>> 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
>>>>>
>>>>>
>>>>> On 1 February 2013 10:03, Ali Abedi <[email protected]> wrote:
>>>>>
>>>>>> 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
>>>>>> });
>>>>>> };
>>>>>> });
>>>>>>
>>>>>> --
>>>>>> 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 [email protected].
>>>>>> To post to this group, send email to [email protected].
>>>>>>
>>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>> 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 [email protected].
>>>> To post to this group, send email to [email protected].
>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>
>>>>
>>>>
>>>
>>> --
>> 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 [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>>
>>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
