在两个控制器之间传递动态数据答案

【问题标题】：Passing Dynamic Data Between Two Controllers在两个控制器之间传递动态数据
【发布时间】：2017-11-07 16:05:02
【问题描述】：

我希望将一个项目从控制器的 $scope 元素（在本例中为“标题”和“内容”）传递到单击时重定向到的页面。

目前的设置方式如下： - 第 1 页加载 masterArray，显示所有元素 - 用户然后单击与“href”属性链接的按钮 - 当用户单击 href 按钮时，将显示新页面（第 2 页）。

我的问题：如何将“标题”和“内容”传递到第 2 页并确保仅映射和显示关联的标题/内容（基于单击的链接）？

下面的代码是动态显示所有数据的主页

app.controller("SomeController", function ($scope, $window) {
$scope.masterArray = [{
    title: "MainTitle",
    segments: [{
        title: "SubTitle",
        articles: [{
            header: "Article1Header",
            content: "SomeContent",
            href: "http://uniqueURL1.com"
        }, {
            header: "Article2Header",
            content: "SomeContent",
            href: "http://uniqueURL2.com"
        }, {
            header: "Article3Header",
            content: "SomeContent",
            href: "http://uniqueURL3.com"
        }, {
            header: "Article4Header",
            content: "SomeContent",
            href: "http://uniqueURL4.com"
        }]
    }

   }]
}];

第 1 页

<div ng-controller="SomeController">
<div class="section">
<div class="segment" ng-repeat="m in shownArray">
    <div ng-repeat="s in m.segments" ng-if="m.segments">
        <h4 ng-show="filtered.length">{{s.title}} ({{filtered.length}})</h4>
        <div template="basic" ng-repeat="a in s.articles|articleFilter:query as filtered" is-open="a.isOpen">
            <h2 ng-bind-html="a.header | highlight:query"></h2>
            <div>
                <p ng-bind-html="a.content | highlight:query"></p>
                <a class="button button-primary" ng-href="{{a.href}}">View</a>
            </div>
        </div>
    </div>

</div>
</div>
</div>

第 2 页（期望的结果）

<div>
<h2>//DISPLAYS ASSOCIATED 'header'</h2>
<h3>//DISPLAYS ASSOCIATED 'content'</h3>
</div>

【问题讨论】：

这是单页应用吗？ URL 是否导航到不同的状态？
@vinays84 这不是单页应用；但是 URL 共享相同的域并在相同的 ng-app 指令下
Angular 允许在单页应用程序的状态之间传递数据。由于链接是新页面请求，您必须将数据（header 和 content）作为 URL 参数（例如 uniqueURL1.com?header=Article1Header&content=SomeContent）传递，然后将它们解析出来。
@vinays84 有没有办法访问范围对象内的标头属性？（即uniqueURL1.com?header=$scope.masterArray.segments.articles.header）？我试过搜索但没有运气..

标签： javascript jquery html angularjs controller

【解决方案1】：

如果要使用 URL 参数，请使用 $location.search:

$rootScope.header = $location.search().header;

如果您希望以不同的方式构建 URL，也可以使用 $routeParams。

两者都需要您正确构建ng-href：

ng-href="{{a.href+'?header='+a.header+'&content='+a.content}}"

如果您的架构允许，请考虑使用单页应用程序，您可以在其中使用 $stateProvider 在 config() 中配置状态，然后使用 ui-sref 在 HTML 中访问它们。

【讨论】：

你的第二个建议对我有用。谢谢！