CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Joey
Joey

Reputation: 1866

Switching Between href and ui-sref

Currently I have a page that is populated from a news controller.

news.html

<div class="col-md-4" ng-repeat="article in newsController.news">
<a title="Click to view" href="{{article.location}}" target="_blank">
    <div class="eventHolder">
        <h1>{{article.title}}</h1>
        <hr />
        <p>{{article.description}}</p>
        <p class="date">{{article.date}}</p>
    </div>
</a>
</div>

format of news.controller.js

var newsPage = angular.module('myApp');
    newspage.controller etc etc...

    ...
    self.news = [
        title:
        description:
        date:
        location: "img/blabla.pdf"

So if the location is a pdf then it is fine. The issue is I need some of the pages are actual html pages so they need to use ui-sref instead of href. I was thinking of adding another attribute to the page like page: true and add an ng-click to the html to check if it is a pdf (or a page). That will determine whether to use ui-sref or href.

I am not sure how to "send" the ui-sref/href parameters to the html from the controller. Or if I am even doing this correctly. Apologies if anything is unclear.

UPDATE/CLARIFICATION

The reason it has to use ui-sref is the page is managed by a $state provider which is also giving it information for it's css. (It does not have it's stylesheet on the page).

Upvotes: 3

Views: 766

Answers (1)

willie17
willie17

Reputation: 901

You can add a field in news like this:

self.news = [{
  ...
  isPage: true,
  ...
}]

Then in the HTML, you can use ng-if to decide to use href or ui-sref:

<a ng-if="article.isPage" ui-sref="{{article.location}}">
  ...
</a>
<a ng-if="!article.isPage" href="{{article.location}}">
  ...
</a>

Upvotes: 3

Related Questions