0
$('#reply').css("padding-top", $('.post:visible').height()-35 + "px" );

What I'm doing is setting the CSS padding-top value for #reply to .post's height.

The only way I can get this to work in my AngularJS project so far is to to this:

$(function() {
  setTimeout(function () {
    $('#reply').css("padding-top", $('.post:visible').height()-35 + "px" )
  },300)
});

How would I do it the Angular way, for example maybe something like this with the code being some kind of angular.copy? Or can I just keep using jQuery. If so how would I make it fire when AngularJS is done, so I don't need a timeout function?

<div id="#reply" ng-style="{'padding-top' : code_that_returns_.post:visible's_height }">
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
  • You will probably need a directive for this. What exactly determines if the post is visible or not? Provide a [mcve] – charlietfl May 06 '17 at 13:08
  • jQuery.expr.filters.hidden = function( elem ) { var width = elem.offsetWidth, height = elem.offsetHeight; return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); }; –  May 06 '17 at 13:22
  • ill put more work into this tomorrow and probably solve it with a very ugly and bad example. Ill clean up the question then too, sorry for it being bad –  May 06 '17 at 13:23
  • Missing the point of my question...something in angular model would be telling view to display that element. The jQuery source of `:hidden` is completely irrelevant – charlietfl May 06 '17 at 13:24
  • what i pasted was how jquery does it, how to turn that into angularness idk gnight –  May 06 '17 at 13:26
  • hidden in my case literally means ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); –  May 06 '17 at 13:27
  • This is an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). How jQuery does it is completely irrelevant. You need to show some angular context for those elements – charlietfl May 06 '17 at 13:28
  • Well its hardly irrelevant when im literally porting it. –  May 06 '17 at 13:29
  • Strongly suggest reading [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl May 06 '17 at 13:29
  • But approach is completely different in angular... your data model drives the view. You can't simply say ... *"convert this jQuery"*... without providing any of the angular context code – charlietfl May 06 '17 at 13:30
  • yeah i know your right ill try to improve the question. –  May 06 '17 at 13:57
  • 1
    You may dislike this comment as well, but I think you need to rework your HTML and CSS instead of solving this problem with JavaScript. It seems like you have an absolutely positioned comment box that you need to push below the post...just position it relatively instead. What's the (static) HTML and CSS currently like? It may be better to put it in a [fiddle](http://jsfiddle.net) to not clutter up this post. – Purag May 06 '17 at 20:22
  • Any particular reason to use inline styling? No separation of concerns... – Christian Bonato May 06 '17 at 20:27

1 Answers1

0

The question is poorly asked but I decided I will work on both the question and answer over time.

Currently this is my solution (it solves my problem of the timeout).

<div id="#reply" ng-style="{'padding-top' : calcPostHeight() }">

$scope.calcPostHeight = function () {
  return $('.post:visible').height()-35 + "px";
};

EDIT:

This solution seems worse... but uses a directive.

<div id="#reply" post-height="35">

.directive('postHeight', function($timeout){
  return {
    link: {
      post: function (scope, element, attr) {
        $timeout(function(){
          var result = document.getElementsByClassName("post")[0];
          element[0].style.paddingTop = result.style.width - attr.postHeight;
        }, 0)
      }
    }
  }
});
  • This should be in a directive where the element itself is exposed. jQuery and dom code do not belong in controllers – charlietfl May 06 '17 at 14:15
  • ill give you all 13 of my points for that directive code... every post you've made has pointed out how bad at angular i am, give me a hand lol. Im going to keep going at this... I know what good angular good code looks like already but i cant write it, this is my first angular project and i only did it because i just maintained one that was well done and it was so easy for complex projects that im trying it out. just please stop pointing out the bad things im about to do because theres going to be alot. feel free to help. –  May 06 '17 at 18:19
  • use ng-class and css. You're thinking too much the React way, I wouldn't recommend mixing languages in one string. NgClass is made to react in real time to $scope (whether in an app.controller or a directive's controller). – Christian Bonato May 06 '17 at 20:26
  • 1
    @charlietfl pointed you to [a good reference article](http://stackoverflow.com/q/14994391/215552) in a comment to your question. You owe it to yourself (and the people here) to do some research before asking a question on Stack Overflow, as indicated in [ask]. It is not simply a matter of putting lipstick (AngularJS) on a pig (jQuery). AngularJS is about using [the MVC pattern](https://developer.chrome.com/apps/app_frameworks#mvc). The model should drive the view. – Heretic Monkey May 06 '17 at 20:26