javascript - rootscope 与 angularJs 范围

Question

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

我有以下示例，我尝试从内部页面对父页面上的元素执行操作，但我不明白为什么它的行为方式很奇怪:我无法设置默认值或操作使用作用域，但我可以使用 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>

这是内页的 Controller :

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 注入(inject) Controller 时，都会创建新实例(检查 $scope.id)。如果你想在 Controller 之间传递数据，你应该使用服务。查看有关堆栈溢出的这篇文章。

LINK