从 AngularJS 中的 ngview 内部的视图更新主页

Update main page from views inside ngview in AngularJS

本文关键字：视图 更新 主页 内部 AngularJS 中的 ngview      更新时间：2023-09-26

我有一个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 中加载的视图中更新计数器结果。我希望计数器结果得到更新。

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

索引.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>

以及您必须添加到索引.html文件中的应用程序.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的值。所以在这里你可以把你的计数结果值放在$rootScope。由于所有$scope都是$rootScope的子项，因此它将在ng视图的一侧获得值。希望解释有意义。

相关文章：