Question

我正在尝试在下拉菜单中加载可点击的新闻Feed网址列表。当我在视图中使用固定地址时，它工作正常但是当我使用控制器填充地址时，下拉菜单很好但是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网址？

由于

Answer 1

所以我建议使用$ parent。 ng-repeat有它自己的范围所以当你说“feedSrc”时，它正在查看该数据的ng-repeat范围。 “newsChannel”可用，因为它会通过ng repeat添加，但您会注意到它永远不会添加到父控制器的$ scope中。

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

另外，您可能会考虑不在视图中进行分配，通常最好只在控制器中分配变量，并确保HTML 只读

Answer 2

问题是如何将参数传递给ng-click：

ng-click="$parent.feedSrc='{{newsChannel.src}}';..."

你不需要把把手包裹起来......

ng-click="$parent.feedSrc='newsChannel.src';..."

应该解决你的问题。

Answer 3

我找到了解决方法。为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'
        }
    ];

}]);

感谢这篇文章：ng-click inside ng-repeat

Angularjs ng-click在ng-repeat中

3 个答案: