ttbarnes / angular-ticker

Simple angular ticker

Home Page:http://ttbarnes.github.io/angular-ticker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

remote data can't init ticker

fangsj opened this issue · comments

if i use $http response data , the ticker can‘t init, and remind me 'no items assigned to ticker! Ensure you have correctly assigned items to your ng-repeat.'
i think that function execution sequence has problem

Thanks @fangsj , will look into fixing this.

For now, it should work if you do the http call with ui-router resolve:

$stateProvider
  .state('myPage',{
    resolve: {
      tickerData: function($http) {
        return $http.get('/api/feed').then(function (data) {
            return data.data;
        });
      }
    }
  })

Then you just have to pass it into the controller and assign to scope:

app.controller('myCtrl', function myCtrl($scope, tickerData) {
  $scope.myTickerItems = tickerData;
});

<ticker tickeritems="myTickerItems"></ticker>

Thank you!

Hey @fangsj , could you please provide more details RE how you got this error? I'm unable to replicate.

Are you sure you were assigning the data to scope after $http.getsuccess? Presumably using promises?

I'm able to successfully get data via $http and it's assigned to the ticker without errors, eg:

$http.get('http://someapi.com/test').then(function(data) {
  $scope.tickerItems = data.data;
});

I am experiencing the same. Here is my template with alias controller name. sure am getting the response data from promise correctly.

`



  • [{{item.sPressReleaseDate}}] - {{item.PressreleaseTitle}}
    Read More..
`

I make it work (as a workaround?) by adding a flag in controller.

<ul ticker class="active" ng-if="tc.dataloaded"> <li ng-repeat="item in tc.pressnewsData" class="item-{{$index}}"> <b>[{{item.sPressReleaseDate}}]</b> - {{item.PressreleaseTitle}} <a ng-click="tc.openPress(item.PressreleaseID)">Read More..</a> </li> </ul>

tc.dataloaded is the flag in controller as "false" by default and marking it as "true" when data loaded as promise response.

thanks @acclaimuser - could you please show the code you're using to get the data and assigning to scope? The snippet I pasted above (assigning to scope after promise success) works, so i'm unclear on how to replicate the issue here.

Could simplify your workaround though, instead of adding dataloaded:

<ul ng-if="tc.pressnewsData" ticker> ... </ul>

Not sure if related, but if the array assigned to ng-repeat is not initialized WITH elements the ticker won't work when updating the data. In my case I am updating the ticker after a $rootscope.broadcast()

$scope.tickerData = [{}];  // Had to initialize with object

$rootScope.$on('tickerDataUpdated', function(event, args){ 
  $scope.tickerData = args;  // for this to work
});