AngularJS ng内单击ng-repeat

Ryan 发表于 Dev

瑞安

我正在尝试在下拉菜单中加载可点击的新闻提要URL列表。当我在视图中使用固定地址时，它工作正常，但是当我使用控制器填充地址时，下拉菜单很好，但是ng-click不能按预期工作。

这是工作版本的jsfiddle：http : //jsfiddle.net/mahbub/b8Wcz/

此代码有效：

 <ul class="dropdown-menu">
     <li><a href="#" ng-click="feedSrc='http://www.abc.net.au/news/feed/45910/rss.xml';loadFeed($event)">ABC News</a>
     </li>
     <li><a href="#" ng-click="feedSrc='http://rss.cnn.com/rss/cnn_topstories.rss';loadFeed($event);">CNN</a>
     </li>
 </ul>

控制器代码：

var App = angular.module('RSSFeedApp', []);

App.controller("FeedCtrl", ['$scope', 'FeedService', function ($scope, Feed) {
    $scope.loadButonText = "Select news channel";
    $scope.loadFeed = function (e) {
        Feed.parseFeed($scope.feedSrc).then(function (res) {
            $scope.loadButonText = angular.element(e.target).text();
            $scope.feeds = res.data.responseData.feed.entries;
        });
    }


App.factory('FeedService', ['$http', function ($http) {
    return {
        parseFeed: function (url) {
            return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url));
        }
    }

}]);

此代码不：

<ul class="dropdown-menu">
  <li ng-repeat =" newsChannel in channels">
  <a href="#" ng-click="feedSrc='{{newsChannel.src}}';loadFeed($event)">{{newsChannel.title}}</a>
  </li>
</ul>

控制器代码：

App.controller("FeedCtrl", ['$scope', 'FeedService', function ($scope, Feed) {
    $scope.loadButonText = "Select news channel";
    $scope.loadFeed = function (e) {
        Feed.parseFeed($scope.feedSrc).then(function (res) {
            $scope.loadButonText = angular.element(e.target).text();
            $scope.feeds = res.data.responseData.feed.entries;
        });
    }

$scope.channels = [
        {
            'src': 'http://www.abc.net.au/news/feed/45910/rss.xml',
            'title': 'ABC News'
        },
        {
            'src': 'http://rss.cnn.com/rss/cnn_topstories.rss',
            'title': 'CNN'
        }
    ];

}]);


App.factory('FeedService', ['$http', function ($http) {
    return {
        parseFeed: function (url) {
            return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url));
        }
    }

}]);

TypeError：无法读取null的属性“ feed”

知道为什么$ scope.feedSrc无法获取feedSrc网址吗？

谢谢

瑞安

我找到了解决方法。在loadFeed方法中添加了另一个参数。

<ul class="dropdown-menu">
  <li ng-repeat =" newsChannel in channels">
  <a href="#" ng-click="loadFeed($event,newsChannel.src)">{{newsChannel.title}}</a>
  </li>
</ul>

这是控制器的新版本：

App.controller("FeedCtrl", ['$scope', 'FeedService', function ($scope, Feed) {
    $scope.loadButonText = "Select news channel";
    $scope.loadFeed = function (e, feedUrl) {
        Feed.parseFeed(feedUrl).then(function (res) {
            $scope.loadButonText = angular.element(e.target).text();
            $scope.feeds = res.data.responseData.feed.entries;
        });
    }
    $scope.channels = [
        {
            'src': 'http://www.abc.net.au/news/feed/45910/rss.xml',
            'title': 'ABC News'
        },
        {
            'src': 'http://rss.cnn.com/rss/cnn_topstories.rss',
            'title': 'CNN'
        }
    ];

}]);