Как получить доступ к $ 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

Когда я столкнулся с этим в приложении, а также для обновления значения в представлении, я использовал функцию получения, чтобы получить $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 2

Попробуйте:

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

Answer 3

Вам не нужно указывать $ rootScope в представлении ypur. Вы можете использовать его так же, как и переменные $ 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>