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>

这是内页的控制器：

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注入控制器时，都会创建新实例（Check $ scope.id）。如果要在控制器之间传递数据，则应使用服务。在堆栈溢出时检查这篇文章。

LINK

Answer 2

根据您的代码，因为您使用$rootScope.selectedSchema = "A"; selectedSchema是rootcope的直接属性。

我们何时从选择框更改selectedSchema，并将新的selectedSchema属性添加到childScope（$ scope）。这个新属性隐藏/隐藏了同名的parentScope（$ rootscope）属性。

因此，当您显示选择字段时，默认情况下指定$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>

请运行并比较两种表示形式。

Here is Js Fiddle.

rootscope与范围angularJs

2 个答案: