如何在视图中访问$rootScope (cshtml)

Question

>我有以下代码

...
...
...
if (response.data) {
    console.log("response data was not null");
    if (response.data != null) {
        $rootScope.permissions = response.data.permissions;
        console.log("permissions: ", $rootScope.permissions);
        localStorage.setItem("UserPermissions", JSON.stringify($rootScope.permissions));        
...
...
...

我想根据权限隐藏<li>选项卡。我已经尝试了多种方法，但无法找到解决方案。在线阅读有关如何使用 rootScope，我遇到了一些帖子，这些帖子有使用 $root 的解决方案，但这也不起作用。

<div class="hidden-sm hidden-xs" style="text-align: center;">
    <ul class="header-menu">
        <li ng-if="$root.permissions[1].includes('permissionName')"><a ng-class="{ activeMenuItem: isActive('/Cases')}" ui-sref="Caes" class="current">My Cases<span class="count-wrap" ng-show="getCases() > 0" ng-bind="getCaseCount()" ng-cloak></span></a></li>
        <li ng-if="permissions[1].includes('permissionName')"><a ng-class="{ activeMenuItem: isActive('/Lawyers')}" ui-sref="Lawyers" class="current">My Lawyers<span class="count-wrap" ng-show="Law.Lawyer > 0" ng-bind="Law.LawyerCount" ng-cloak></span></a></li>
    </ul>
</div>

创建片段有点困难，但我正在寻找指导，如果有更好的方法来做到这一点，或者如果我做错了。

Answer 1

您无需在 ypur 视图中指定$rootScope。您可以像使用变量一样使用它$scope。

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$rootScope) {
    //set permissions to rootScope
    $rootScope.permissions=[{name:"permission 1",isActive:true},{name:"permission 2",isActive:false}]
});

	
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
	<div class="hidden-sm hidden-xs" style="text-align: center;">
		<ul class="header-menu">
			<li ng-repeat="permission in permissions">
			<a ng-if="permission.isActive">{{permission.name}} is Active<span class="count-wrap" ng-show="getCases() > 0" ng-bind="getCaseCount()" ng-cloak></span></a>
			<a  ng-if="!permission.isActive">{{permission.name}} is Not Active<span class="count-wrap" ng-show="getCases() > 0" ng-bind="getCaseCount()" ng-cloak></span></a>
			</li>			
		</ul>
	</div>
</div>

Answer 2

当在应用程序中遇到这种情况时，以及为了在视图中更新值，我使用 getter 函数在控制器中获取$rootScope值（我习惯于命名我的控制器，但如果你不这样做，只需删除ctrl.）：

在视图中：

<li ng-if="ctrl.getPermissions()[1].includes('permissionName')">...

在控制器功能中：

function ctrlFunc($rootScope) {
    this.getPermissions = function(){ //or whatever way you use to define your functions, with $scope or this
        return $rootScope.permissions;
    };
}

Answer 3

尝试：

ng-if="::$root.permissions.length > 1 && ::$root.permissions[1].includes('permissionName')"