[英]rootscope vs scope angularJs
I am new to angularJs and I need your help. 我是angularJ的新手,需要您的帮助。
I have the following example where I am trying to do an action on an element on the parent page from the inner page but I do not understand why it behaves in a strange way: I can't set a default value or action using the scope but I can do that using the rootScope. 我有以下示例,尝试从内页对父页上的元素执行操作,但我不明白为什么它的行为方式很奇怪:我无法使用范围设置默认值或操作但是我可以使用rootScope做到这一点。 At the same time I can't read its value using the rootScope but I can read it using the scope.
同时,我无法使用rootScope读取其值,但可以使用范围读取。
Here is my example: 这是我的示例:
This is the parent page content wrapper: 这是父页面内容包装器:
<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>
<span class="thin uppercase hidden-xs"></span>
<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>
This is the controller of the inner page: 这是内页的控制器:
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);
};
});
In my example, $rootScope.selectedSchema = "A";
在我的示例中,
$rootScope.selectedSchema = "A";
set the default value but if I use $scope.selectedSchema = "A";
设置默认值,但是如果我使用
$scope.selectedSchema = "A";
it does not work and at the same time I can't read the value using $rootScope.selectedSchema
and it returns undefined
, but I can read it using the $scope.selectedSchema
and it returns the selected value. 它不起作用,同时我无法使用
$rootScope.selectedSchema
读取值,并且它返回undefined
,但是我可以使用$scope.selectedSchema
读取它,并且它返回选定的值。
Any help to understand this behavior? 对了解这种行为有帮助吗?
According to your code, since you are using $rootScope.selectedSchema = "A";
根据您的代码,因为您正在使用
$rootScope.selectedSchema = "A";
selectedSchema
is the direct property of the rootscope. selectedSchema
是rootscope的直接属性。
when ever we change the selectedSchema
from the select box, and a new selectedSchema property is added to the childScope($scope). 每当我们从选择框更改
selectedSchema
时,就会将新的selectedSchema属性添加到childScope($ scope)。 This new property hides/shadows the parentScope($rootscope) property with the same name. 此新属性将隐藏/阴影具有相同名称的parentScope($ rootscope)属性。
So, when you are displaying the select field by assigning $rootScope.selectedSchema = "A";
因此,当您通过分配
$rootScope.selectedSchema = "A";
来显示选择字段时$rootScope.selectedSchema = "A";
by default its showing 'A', but if you change it once, a new $scope.selectedSchema
will be created and it over-rides the $rootScope.selectedSchema
, so you are then able to access using $scope.selectedSchema
. 默认情况下,其显示为'A',但是如果您对其进行更改,将创建一个新的
$scope.selectedSchema
,它会覆盖$rootScope.selectedSchema
,因此您可以使用$scope.selectedSchema
进行访问。
So,inorder to change the rootScope value diretly, you have to take a hash object and point its key to the value. 因此,为了直接更改rootScope值,您必须获取一个哈希对象并将其键指向该值。
Eg: $rootScope.data = {}
$rootScope.data.selectedSchema = 'A'
Here is an example I created illustrating this example. 这是我创建的一个示例,用于说明此示例。
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>
Pls, run and compare both representations. 请运行并比较两种表示形式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.