0

I have a strange setup with ui-router. Allow me to poorly illustrate as it is a very complicated layout. (Think Google Image search/expand) When an item is clicked the ng-if = true and shows item details beneath the row.

category //horizontal row of items
    ----------------------
    item item item etc
    ----------------------

    <ui-view ng-if="item-equals-category"> //ui-view under horizontal row

category
    ----------------------
    item item item etc
    ----------------------

    <ui-view ng-if="item-equals-category2>

The issue I'm having is this: The contained code executes 21 times (21 rows) despite being hidden via ng-if. This is creating issues with things like Google API because it makes 21 calls to API and gets blocked. Is there a way to do this layout without 21 ui-views. Just one UI view that is inserted under selected items row.

Auzy
  • 2,135
  • 2
  • 25
  • 35
  • 1
    Why would there be 21 calls if all the ui-views are not in the dom until click on item and then one is shows ? – elpddev Apr 11 '17 at 20:39
  • That is what I thought. That is the intended behavior of `ng-if` no? Perhaps the function I use to evaluate the ng-if is wrong. They don't display but the resources inside are loading. I checked to make sure there was no `ng-hide` and can confirm I'm using `ng-if` – Auzy Apr 11 '17 at 20:42
  • @elpddev Thanks for your comment. You reassured me I was doing it right and I checked my ng-if. What was happening is the one on the `ui-view` was failing and then one _inside_ the view was catching effectively blocking view but not scripts at top of template... fixed. Thanks! – Auzy Apr 11 '17 at 20:52
  • It seems ng-if not preventing the initial placement but only removing it from the dom. – elpddev Apr 11 '17 at 20:52
  • Glad to help although did not do much. But the ng-if case was interesting. In a simple jsfiddle `ng-if=false` the element is put on the dom but then it is taken so a `
    ` executed one at least and you can see that in the console.     – elpddev Apr 11 '17 at 20:57
  • @elpddev whoa, interesting. I was able to confirm that as well: http://codepen.io/Auzy/pen/rmBZOx?editors=1111 Is that supposed to happen? Perhaps because I didn't have my script in the "Angular way"? This is exactly what I'm running into with scripts evaluating 21 times. – Auzy Apr 11 '17 at 21:04
  • 1
    Looks like this issue: http://stackoverflow.com/questions/29120637/angularjs-ng-if-directive-briefly-renders-even-when-condition-is-false-before-re – Auzy Apr 11 '17 at 21:18
  • 1
    I'm still not sure why you would want to use ui-view for your porpuse. It seems what you are looking for is a cusotm directive that get as a property input the item that was clicked and then do it stuff like collecting and showing data on the specific item. If you want to url to reflect the item you clicked on, you can do that via $state.transitionTo with `location: replace` and setting the parameter of item id in there. – elpddev Apr 11 '17 at 21:42
  • I think it had something to do with loading directly to that open div via URL from external sources. Honestly, I don't understand Angular all that well so it may just be a bad decision on my part. I will look into your suggestion in depth later. My method feels dirty and I think there is a better way like you suggested. – Auzy Apr 11 '17 at 21:52

1 Answers1

0

Thanks for all the feedback leading to this answer. What was occurring is I was writing my JS in script tags inside the content loaded into the ui-view. If JS is inside the content, it will get evaluated. ng-if only prevents the execution of the code if done in the proper "Angular Way" aka in a directive.

Will Execute:

<div ng-if="false">
    <script>
        console.log("in HTML")
    </script>
</div>

Won't execute:

myApp.directive('shouldntAppear', function () {
        return {
            template: "Shouldn't appear",
            link: function(){
                console.log('from directive');
            }
        };
    });
<div class="test" shouldnt-appear ng-if="false">
</div>

Check out this CodePen and set ng-if true/false to see difference in console.

Auzy
  • 2,135
  • 2
  • 25
  • 35