CODEWITHSUNDEEP
angularjsangular-ui-router
Bondifrench
Bondifrench

Reputation: 1292

Angular-ui router doesn't update links

I am building a basic rss reader, Ihave a basic form which uploads a series of url into a dropdown menu, when a user chooses a specific one, I call an api to access it. My form is the following:

<div class="panel-body" ng-controller="NewsCtrl">
        <form class="form-inline" role="form">
            <div class="input-group">
                <div class="input-group-btn">
                    <button class="btn btn-info" type="button">{{loadButtonText}}</button>
                    <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle-dropdown</span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="rss in RSSList">
                            <a href="#" ng-click="loadFeed(rss.url, $event);">{{rss.Title}}</a>
                        </li>
                    </ul>
                    <input type="text" class="form-control" autocomplete="off" placeholder="This is where your feed's url will appear" data-ng-model="url">
                </div>
            </div>
        </form>

My routes/states are defined as follows:

var myApp = angular.module('myApp',['ngSanitize','ui.router', 'myAppControllers', 'myAppFactories']);
myApp.config(['$stateProvider','$urlRouterProvider','$locationProvider', 
    function ($stateProvider,$urlRouterProvider,$locationProvider) {
    $stateProvider
        .state('home', {
            url:'/home',
            templateUrl: 'views/partials/partial-home.html'
        })
        .state('app', {
            url:'/api',
            templateUrl: 'views/partials/partial-news.html',
            controller: 'NewsCtrl' 
        });
    $urlRouterProvider.otherwise('/home');
    $locationProvider
    .html5Mode(true)
    .hashPrefix('!');
}]);

And my controller is the following:

var myApp = angular.module('myAppControllers',[]);
myApp.controller('NewsCtrl', ['$scope','MyService', function($scope, Feed){
    $scope.loadButtonText = 'Choose News Feed ';
    $scope.RSSList = [
        {Title: "CNN ",
        url: 'http://rss.cnn.com/rss/cnn_topstories.rss'},
        {Title: "CNBC Top News ",
        url: 'http://www.cnbc.com/id/100003114/device/rss/rss.html'},
    ];
        //Loading the news items
    $scope.loadFeed = function (url, e) {
        $scope.url= url;
        Feed.parseFeed(url).then(function (res) {
            $scope.loadButtonText=angular.element(e.target).text();
            $scope.feeds=res.data.query.results.item;
            });
    }
}]);

My problem arised when I changed to use ui-router, I know I have to change this line 

<a href="#" ng-click="loadFeed(rss.url, $event);">{{rss.Title}}</a>

by using ui-sref, but just changing to <a ui-sref="loadFeed(rss.url, $event);">{{rss.Title}}</a> still doesn't upload my urls into my NewsCtrl controller, any clues?

Bonus question: When I insert a console.log just before $scope.loadButtonText and I open the developer console, it seems to upload NewsCtrl 2 times, why is that?

Upvotes: 0

Views: 206

Answers (1)

Code Whisperer
Code Whisperer

Reputation: 23662

ui-sref="app"

Should work.

sref stands for "state" reference, instead of the familiar "hyperlink" reference. So it will look for a state defined with .state();

Alternatively, you can go with a good old fashioned url,

href="#/api"

This would have the same effect. sref is recommended by project developers.

Upvotes: 1

Related Questions