根鏡vs范圍angularJs

Question

我是angularJ的新手，需要您的幫助。

我有以下示例，嘗試從內頁對父頁上的元素執行操作，但我不明白為什么它的行為方式很奇怪：我無法使用范圍設置默認值或操作但是我可以使用rootScope做到這一點。 同時，我無法使用rootScope讀取其值，但可以使用范圍讀取。

這是我的示例：

這是父頁面內容包裝器：

<div class="page-content-wrapper">
    <div ng-class="settings.layout.pageContent">
        <!-- BEGIN STYLE CUSTOMIZER(optional) -->
        <!-- END STYLE CUSTOMIZER -->
        <!-- BEGIN ACTUAL CONTENT -->
        <div class="page-bar">
            <div ncy-breadcrumb></div>
            <div class="page-toolbar" ng-show="settings.layout.showHeaderTools">
                <div id="date-range" class="pull-right tooltips btn btn-sm" data-container="body" data-placement="bottom" data-original-title="Change dashboard date range">
                    <i class="icon-calendar"></i>&nbsp;
                    <span class="thin uppercase hidden-xs"></span>&nbsp;
                    <i class="fa fa-angle-down"></i>
                </div>
                <div class="actions">
                    <select class="form-control" ng-change="changeSchema();" ng-model="selectedSchema">
                        <option value="A">Schema A</option>
                        <option value="B">Schema B</option>
                        <option value="C">Schema C</option>
                        <option value="D">Schema D</option>
                        <option value="E">Schema E</option>
                    </select>
                </div>
            </div>
        </div>
        <h3 class="page-title hidden-print" data-ng-bind="$state.current.data.pageTitle"></h3>
        <div ui-view class="fade-in-up"> </div>
        <!-- END ACTUAL CONTENT -->
    </div>
</div>

這是內頁的控制器：

angular.module('MetronicApp').controller('dashboardController', function ($rootScope, $scope, $http, $timeout, NgMap) {
    $scope.$on('$viewContentLoaded', function () {
        // initialize core components
        App.initAjax();
    });

    $scope.data = {};
    // set sidebar closed and body solid layout mode
    $rootScope.settings.layout.pageContentWhite = true;
    $rootScope.settings.layout.pageBodySolid = false;
    $rootScope.settings.layout.pageSidebarClosed = true;
    $rootScope.settings.layout.showHeaderTools = true;
    $rootScope.settings.layout.pageContent = 'page-content bg-grey-steel';
    $scope.isLoading = false;
    $scope.data.selectedKPI = "Profit";


    $rootScope.selectedSchema = "A";
    $rootScope.changeSchema = function () {
        console.log($scope.selectedSchema);
    };
});

在我的示例中， $rootScope.selectedSchema = "A"; 設置默認值，但是如果我使用$scope.selectedSchema = "A"; 它不起作用，同時我無法使用$rootScope.selectedSchema讀取值，並且它返回undefined ，但是我可以使用$scope.selectedSchema讀取它，並且它返回選定的值。

對了解這種行為有幫助嗎？

Answer 1

每次將$ scope注入控制器時，都會創建一個新實例（檢查$ scope.id）。 如果要在控制器之間傳遞數據，則應使用服務。 在堆棧溢出時檢查此帖子。

鏈接

Answer 2

根據您的代碼，因為您正在使用$rootScope.selectedSchema = "A"; selectedSchema是rootscope的直接屬性。

每當我們從選擇框更改selectedSchema時，就會將新的selectedSchema屬性添加到childScope（$ scope）。 此新屬性將隱藏/陰影具有相同名稱的parentScope（$ rootscope）屬性。

因此，當您通過分配$rootScope.selectedSchema = "A";來顯示選擇字段時$rootScope.selectedSchema = "A"; 默認情況下，其顯示為'A'，但是如果您對其進行更改，將創建一個新的$scope.selectedSchema ，它會覆蓋$rootScope.selectedSchema ，因此您可以使用$scope.selectedSchema進行訪問。

因此，為了直接更改rootScope值，您必須獲取一個哈希對象並將其鍵指向該值。

Eg: $rootScope.data = {}
    $rootScope.data.selectedSchema = 'A'

這是我創建的一個示例，用於說明此示例。

 angular.module('myApp', []) .run(function($rootScope) { }) .controller('myCtrl', function($scope, $rootScope) { $rootScope.data = {'selectedSchema': 'A'} $scope.changeSchema = function() { console.log($scope.data.selectedSchema) console.log($rootScope.data.selectedSchema) }; $scope.getOrig = function() { return $rootScope.data.selectedSchema; }; }) .controller('myCtrl2', function($scope, $rootScope) { $rootScope.selectedSchema = 'A'; $scope.changeSchema = function() { console.log($scope.selectedSchema) console.log($rootScope.selectedSchema) }; $scope.getOrig = function() { return $rootScope.selectedSchema; }; }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <strong>Assiging to an object scope changes rootscope also.</strong> <br/> <select class="form-control" ng-change="changeSchema();" ng-model="data.selectedSchema"> <option value="A">Schema A</option> <option value="B">Schema B</option> <option value="C">Schema C</option> <option value="D">Schema D</option> <option value="E">Schema E</option> </select> <br/> Rootscope Value: {{getOrig()}} <br/> </div> <br/><br/> <div ng-controller="myCtrl2"> <strong>Direct assignmennt.scope will not change rootscope. </strong><br> <select class="form-control" ng-change="changeSchema();" ng-model="selectedSchema"> <option value="A">Schema A</option> <option value="B">Schema B</option> <option value="C">Schema C</option> <option value="D">Schema D</option> <option value="E">Schema E</option> </select> <br/> Rootscope Value: {{getOrig()}} <br/> </div> </div> 

請運行並比較兩種表示形式。

這是Js Fiddle。