AngularJS在页面加载时加载数据

Question

I'm new to AngularJS and trying to setup an app that reads an RSS feed and displays the items upon page load.

I have figured out how to have the data loaded and displayed upon clicking a link (see fiddle ), but can't figure out how to have this happen on page load.

My thought is that I'm not using $scope properly or should be using a model.

Any help is appreciated.

Code: http://jsfiddle.net/mikeyfreake/Lzgts/312/

Answer 1

在定义方法本身之后，只需调用方法$scope.loadFeeds() 。

Answer 2

you have not called your controller function. just use this code for controller:

var app = angular.module('newsFeed', []);

    app.controller('FeedController', ['$scope', 'FeedService', function ($scope, Feed) {

        console.log('FeedController called.');

        //These calls cause errors:
        //$scope.loadFeeds();
        //loadFeeds();
        //this.loadFeeds();
        //loadFeeds();

        $scope.loadFeeds = function () {
            console.log('loadFeeds called.');

            Feed.parseFeed('http://www.rotoworld.com/rss/feed.aspx?sport=nfl&ftype=article&count=12&format=atom').then(function (res) {
                $scope.rotoWorld = res.data.responseData.feed.entries;
            });
        };
        $scope.loadFeeds();//you have leave this line pf code
    }]);

Answer 3

Use ng-init directive that will call exactly after controller gets loaded & make much more impact while testing a code using Karma & Jasmine.

Markup

<div ng-controller="FeedController" ng-init="loadFeeds()">
  ..other html here
<div>

Fiddle Here

---

Though the better way would be calling loadFeeds method from controller at the end to ensure all the variables & methods have been initialized. You have to mock all the ajax response as mock data.