从AngularJS中ngview中的视图更新主页答案

【问题标题】：Update main page from views inside ngview in AngularJS从AngularJS中ngview中的视图更新主页
【发布时间】：2015-03-16 05:38:37
【问题描述】：

我有一个 AngularJS SPA 应用程序。主页包括一个 ng-view 指令和一个带有 ng-model 绑定的文本框。我有一些在 ng-view 中显示的视图。我有一个变量在这些视图之间共享，所以我为此使用了一个服务。我的问题是当我单击视图中的按钮时，此变量已更改。我想在更改后立即在主页的文本框中显示更改的值。我的代码如下：

 <div data-ng-app="demoApp">
    <div ng-controller="testController">
        {{countResult}}
    </div>
    <ng-view class="content"></ng-view>
</div>

我更新了在 ngview 中加载的视图内的 counterResult。我希望 counterResult 得到更新。

【问题讨论】：

你能贴一些代码吗？

标签： javascript angularjs single-page-application

【解决方案1】：

所以你想从 ng-view 范围之外访问一个值，在 ng-view 范围内。检查这段代码，我在 jsbin 上测试过，它工作正常：

index.html:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
   <div data-ng-app="demoApp" ng-init="data.countResult='test'">
    <div ng-controller="testController">
        Outside ng-view: {{data.countResult}} <br>
    </div>
    <ng-view class="content"></ng-view>
</div>

</body>
</html>

以及您必须在 index.html 文件中添加的 app.js 文件：

angular.module('demoApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
        .when('/', {
            template: '<div>Inside ng-view: {{data.countResult}}<br><input ng-model="data.countResult"/></div>',
            controller: 'viewMainController'
        })
        .otherwise({
            redirectTo: '/'
        });                    
    }])
    .controller('testController', ['$scope','$rootScope', function($scope, $rootScope){

    }])
    .controller('viewMainController', function($scope){

    });

在这里，在您的 testController 范围内，您定义了 countResult 值，该值不会在另一个不是原型继承自 testController 的范围内找到。在这里，您的 ng-view 不是 testController 的子级，因此它不会获得 countResult 的值。所以在这里你可以把你的 countResult 值放在 $rootScope 中。由于所有 $scope 都是 $rootScope 的子级，因此它将在 ng-view 中获取值。希望解释有意义。

【讨论】：

有点不同。我想更改 viewMainController 中的主页 countResult。
我已根据您的要求更改了代码。现在检查。由于您需要在 ng-view 内部更改外部 countResult 数据时更改它，因此解决方案是使用 ng-init 使用 data.countResult 启动 countResult，该数据将位于 rootscope 中。然后从 ng-view 内部的任何地方更改它，它会在您使用 data(dot)countResult 时反映在外部。签入js bin：jsbin.com/qoqudepiyu/1/edit?html,js,output
或者你可以使用Factory在控制器之间共享相同的数据。
我认为是正确的。但我无法理解。控制器中的所有代码都已注释。
在控制器中我不需要做任何事情来展示演示。但是，如果您确实更改了控制器中的 data.countResult，它将反映在 ng-view 之外，因为我已经在根范围内使用 ng-init 对其进行了初始化，并使用了 data.countResult data(dot)countResult 所以在任何子范围内它将获得该 data.countResult。如果您在子范围内更改它，它将反映在父范围内