0

I am creating a new front end website for an editorial company using WordPress as a backend and Angular as a front end with Node/Express middleware for server side rendering.

The editorial has four different article types: featured, quick, quick short, and video. Each of these have significantly different styles and I need to be sure that they are rendering correctly based on the article type. The types are denoted by a flag in the article JSON object as 1, 2, 3, or 4.

Initially I tried to using ng-if as a way to sort between these types:

    <!-- Lead Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 1">
      Lead Article Content
    </div>

    <!-- Quick Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 2">
       Quick Article Content
    </div>

    <!-- Quick Short Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 3">
       Quick Short Article Content
    </div>

    <!-- Video Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 4">
       Video Article Content
    </div>

Incredibly simple, obviously it doesn't work. It will only render the first div if the post type is 1, but for all others nothing is shown. I was hoping they would filter down the divs like if, else if, else if statements but it doesn't work that way.

Is there any alternative to this? Or, even better, is there a way to check for the post type flag in JavaScript and direct the view to the correct partial if each were in a separate partial file?

cortharlow
  • 135
  • 1
  • 9
  • I think we need more code. I don't understand why the others wouldn't show if the `post_type` was 2, 3, or 4. – CatDadCode Mar 29 '16 at 18:58
  • So it should work if post_type is 2, 3, or 4? Because they definitely were but nothing displayed. I don't know what other code to show you, nothing else is really relevant. – cortharlow Mar 29 '16 at 18:59
  • How bout creating an array of template urls, then` ng-include="urls[posts.thisPost[0].acf.post_type-1]"`? BTW, you may want to use your controller to simplify that expression. – Amy Blankenship Mar 29 '16 at 18:59
  • 2
    Also, there's an ng-switch that might fit your use case better, if you want to stick with something closer to what you have. – Amy Blankenship Mar 29 '16 at 19:00
  • @cortharlow Yeah I don't see why not. You could also try changing `ng-if` to `ng-show` to debug and see if that changes anything. Show us the code where the `post_type` can get changed or where `posts` comes from. I suspect you may need a `$scope.$apply` call somewhere. – CatDadCode Mar 29 '16 at 19:01
  • Is the snippet of markup you've provided inside an `ng-repeat` by any chance? – Lex Mar 29 '16 at 19:05
  • @Lex Nope! Only displaying a single post, no need for ng-repeat. – cortharlow Mar 29 '16 at 19:07
  • Yeah I'd love to see your controller code. Angular takes snapshots of your data model, runs code, then takes another snapshot to determine differences and figure out what changed in your model. Then it runs through and updates the UI. If you are running code outside of the angular event loop then you'll need to wrap that code in a `$scope.$apply(function () { ...code here... });` block which will register the code to run inside the angular event loop. If data model changes outside the event loop then it won't pick up the changes and the UI won't update properly. – CatDadCode Mar 29 '16 at 19:09
  • You usually end up outside the angular event loop via event handlers for non-angular events or asynchronous calls that were not started by angular components like `$http` or `$timeout`. For example, if you use `setTimeout` instead of Angular's `$timeout` utility then the callback passed to `setTimeout` will fire outside of the angular event loop. – CatDadCode Mar 29 '16 at 19:10
  • You might also look into ui-router. This seems like it would fit the [nested state/view functionality](https://github.com/angular-ui/ui-router/tree/legacy#nested-states--views) that ui-router provides. – Lex Mar 29 '16 at 19:12
  • @Lex I am using ui-router, I just need to figure out how to direct to different nested view using the post type flag. – cortharlow Mar 29 '16 at 19:14

1 Answers1

1

For my purposes, ng-switch ended up being the appropriate solution.

Thanks to @AmyBlankenship for bringing it to my attention, and this Stack Overflow question provides the basis for why this is the correct action: ngIf and ngSwitch AngularJS

Community
  • 1
  • 1
cortharlow
  • 135
  • 1
  • 9