Javascript rootscope vs scope angularJs

我是angularJs的新手，我需要你的帮助

我有一个例子，在这个例子中，我试图从内部页面对父页面上的元素执行操作，但我不理解为什么它会以一种奇怪的方式运行：我不能使用范围设置默认值或操作，但我可以使用根范围设置默认值或操作。同时，我不能使用rootScope读取它的值，但我可以使用scope读取它

以下是我的例子：

这是父页面内容包装：

<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
读取值，它返回
未定义的
，但我可以使用
$scope.selectedSchema
读取值，它返回所选值

了解此行为有何帮助？
每次向控制器注入$scope时，都会创建新实例（请检查$scope.id）。如果要在控制器之间传递数据，应该使用服务。在堆栈溢出时检查此帖子

每次将$scope注入控制器时，都会创建新实例（请检查$scope.id）。如果要在控制器之间传递数据，应该使用服务。在堆栈溢出时检查此帖子

根据您的代码，因为您使用的是
$rootScope.selectedSchema=“A”
selectedSchema
是根范围的直接属性

当我们从选择框中更改
selectedSchema
时，一个新的selectedSchema属性将添加到childScope（$scope）。此新属性隐藏/隐藏具有相同名称的parentScope（$rootscope）属性

因此，当您通过分配
$rootScope.selectedSchema=“A”来显示select字段时
默认情况下显示“A”，但如果更改一次，将创建一个新的
$scope.selectedSchema
，它将覆盖
$rootScope.selectedSchema
，因此您可以使用
$scope.selectedSchema
进行访问

因此，为了直接更改rootScope值，必须获取一个hash对象并将其键指向该值

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

下面是我创建的一个示例，用于说明此示例。


angular.module（'myApp'，[]）
.run（函数（$rootScope）{
})
.controller（'myCtrl'，函数（$scope，$rootScope）{
$rootScope.data={'selectedSchema'：'A'}
$scope.changeSchema=函数（）{
console.log（$scope.data.selectedSchema）
console.log（$rootScope.data.selectedSchema）
};
$scope.getOrig=函数（）{
返回$rootScope.data.selectedSchema；
};
})
.controller（'myCtrl2'，函数（$scope，$rootScope）{
$rootScope.selectedSchema='A'；
$scope.changeSchema=函数（）{
console.log（$scope.selectedSchema）
console.log（$rootScope.selectedSchema）
};
$scope.getOrig=函数（）{
返回$rootScope.selectedSchema；
};
});

辅助对象范围也会更改根范围。


模式A
模式B
模式C
模式D
模式E


根范围值：{{getOrig（）}}





Direct assignmennt.scope不会更改根范围

模式A
模式B
模式C
模式D
模式E


根范围值：{{getOrig（）}}


根据您的代码，因为您使用的是
$rootScope.selectedSchema=“A”
selectedSchema
是根范围的直接属性

当我们从选择框中更改
selectedSchema
时，一个新的selectedSchema属性将添加到childScope（$scope）。此新属性隐藏/隐藏具有相同名称的parentScope（$rootscope）属性

因此，当您通过分配
$rootScope.selectedSchema=“A”来显示select字段时
默认情况下显示“A”，但如果更改一次，将创建一个新的
$scope.selectedSchema
，它将覆盖
$rootScope.selectedSchema
，因此您可以使用
$scope.selectedSchema
进行访问

因此，为了直接更改rootScope值，必须获取一个hash对象并将其键指向该值

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

下面是我创建的一个示例，用于说明此示例。


angular.module（'myApp'，[]）
.run（函数（$rootScope）{
})
.controller（'myCtrl'，函数（$scope，$rootScope）{
$rootScope.data={'selectedSchema'：'A'}
$scope.changeSchema=函数（）{
console.log（$scope.data.selectedSchema）
console.log（$rootScope.data.selectedSchema）
};
$scope.getOrig=函数（）{
返回$rootScope.data.selectedSchema；
};
})
.controller（'myCtrl2'，函数（$scope，$rootScope）{
$rootScope.selectedSchema='A'；
$scope.changeSchema=函数（）{
console.log（$scope.selectedSchema）
console.log（$rootScope.selectedSchema）
};
$scope.getOrig=函数（）{
返回$rootScope.selectedSchema；
};
});

辅助对象范围也会更改根范围。


模式A
模式B
模式C
模式D
模式E


根范围值：{{getOrig（）}}