Question

我正在尝试创建一个将打开文章主要阅读材料的模态，但我似乎无法获得范围。现在JSON文件只是摘录，最终它将是一篇完整的文章，所以关键是当你点击阅读更多它将显示完整的文章。

这是我的一个吸尘器。

http://plnkr.co/edit/OTf2179YNnNq2O1Ue18Z?p=preview

它显然缺少很多造型等，我只想在那里得到它的基础。

我知道ng-repeat创建了一个新的范围，因此我应该能够访问这个范围以获得我想要的东西，但是我一直在抨击墙壁试图弄清楚如何获得该范围。我已经阅读了一些相关的问题但他们都使用了Bootstrap模式或类似的东西，我似乎没有看到相关的代码。

有什么想法吗？

编辑：

通过openArticle函数传递文章正确地链接文章，但它仍然没有显示在模态中。

app.controller('ArticleListCtrl', function($scope, $http, researchArticleModal) {
    $http.get('research/articles.json').success(function(data) {
        $scope.articles = data;

        $scope.openArticle = function(article) {
            console.log(article);
            $scope.fromFactory = researchArticleModal();
        }
    });
});

控制台记录正确的标题。我更新了plnkr。

编辑2：

我认为问题是modal创建了自己的范围，它超出了控制器范围。这可能是我遇到的问题吗？

编辑：

所以，问题似乎是创建我的模态的工厂创建了自己的范围。我试图将$ scope注入工厂，但是这引起了错误，但仍然没有运气。

Answer 1

我建议您将文章传递给父作用域中定义的openArticle方法。

您的页脚的ngClick将如下所示：

<footer><a href="" ng-click="$parent.openArticle(article)">Read More</a></footer>

然后，您可以在范围上设置等于当前所选文章的属性，并使用该属性在模式对话框中显示。

app.controller('ArticleListCtrl', function($scope, $http, researchArticleModal) {
$http.get('research/articles.json').success(function(data) {
    $scope.articles = data;


});
 $scope.openArticle = function(article) {
     console.log(article);
     $scope.selectedArticle = article;
     $scope.fromFactory = researchArticleModal();
 }

}）;

在模态对话框的标记中，您可以访问范围的selectedArticle上的属性。

像：

<div>{{selectedArticle.fullArticle}}</div>

这有意义吗？

Answer 2

你不能只在你的openArticle（）函数中传入文章，如

<a href="" ng-click="$parent.openArticle(article)">Read More</a>

在新模态中访问范围形成重复

2 个答案: