Question

我有一个＆lt; ul＆gt;填充服务器。但在那个控制器中还有一个iframe。当＆lt; li＆gt;到达时，即使它们位于同一个控制器中，它们与iframe之间也会有一些脱节。

当你点击其中一个li时，它应该改变iframe上的类，但事实并非如此。但是，如果我移动注入iframe的ng-repeat内部的iframe，它就可以工作。

查看

    <div class="content" ng-controller="FeedListCtrl">
        <ul>
            <li ng-repeat="item in items">
                <div data-link="{{item.link}}" ng-click="articleShowHide='fade-in'">
                    <div ng-bind-html="item.title" style="font-weight:bold;"></div>
                    <div ng-bind-html="item.description"></div>
                    <!-- it works if i put the iframe here -->
                </div>
            </li>
        </ul>
        <!-- doesn't work when the iframe is here -->
        <iframe id="article" ng-class="articleShowHide" src=""></iframe>
    </div>

这是控制器。它执行ajax调用以获取每个＆lt; li＆gt;

的数据

控制器

readerApp.controller('FeedListCtrl', ["$scope", "$http", "FeedListUpdate", function     ($scope, $http, FeedListUpdate) {
    $scope.setFeed = function (url) {
        $http.get('feed?id=' + FeedListUpdate.GetCurrentFeedUrl()).success(function (data)     {
            $scope.items = data.currentFeed.items;
        });
    };
}]);

Answer 1

当在ng-repeat内部时，你处于不同的范围内，这意味着你没有设置你认为的变量。使用$ parent，这应该工作。语法是：

<div data-link="{{item.link}}" ng-click="$parent.articleShowHide='fade-in'">

其他人发现这一点的旁注 - 有时添加花括号也有帮助。有关ng-class的更多信息，请参阅此处：http://docs.angularjs.org/api/ng/directive/ngClass

示例

如果有人想要看到这一点，我会举一个例子来说明设置类的几种方法以及在范围内演示问题（参见：http://plnkr.co/edit/8gyZGzESWyi2aCL4mC9A?p=preview）。它不是很漂亮，但应该很清楚发生了什么。顺便说一下，在这个例子中方法工作的原因是范围不会像变量那样自动重新定义它们，因此它在根范围内调用方法而不是在转发器范围中设置变量。

祝你好运！

在注入的元素上获取ng-click，以更改视图中已有元素的类？

1 个答案: