從AngularJS中ngview內的視圖更新主頁

Question

我有一個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中加載的view內部的counterResult。 我希望counterResult得到更新。

Answer 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中獲得值。 希望解釋有意義。

從AngularJS中ngview內的視圖更新主頁

問題描述

1 個解決方案

解決方案1
1 2015-03-16 07:49:43

從AngularJS中ngview內的視圖更新主頁

問題描述

1 個解決方案

解決方案1 1 2015-03-16 07:49:43

解決方案1
1 2015-03-16 07:49:43