Question

我刚开始使用angularJS，我有一个问题：如何在templateUrl函数中访问使用$ rootScope定义的变量？这是我的代码：

myApp.config(['$routeProvider',
            function($routeProvider, $rootScope) {
              $routeProvider.
                when( '/', {
                  templateUrl: 'partials/login.html',
                  controller: 'loginCtrl'
                }).
                when( '/home', {
                  templateUrl: function($rootScope){
                      console.log($rootScope.utilisateur.user.role_id);
                      if ($rootScope.utilisateur.user.role_id==2){
                      return  'partials/home.html';
                      }
                      else return 'partials/login.html';
                  },
                  controller: 'homeCtrl'
                }).
                otherwise({redirectTo:'/'});
            }]);

它告诉我，utilisateur是未定义的。

我在索引控制器中定义了它：

$rootScope.utilisateur = null;
$rootScope.rapports = null;

然后在LoginCtrl中：

 var user = Authentification.login(email,password);
    user.success(function(response){
        $rootScope.utilisateur = response;
        console.log($rootScope.utilisateur);
        $location.path('/home');
    });

Answer 1

您不能在配置块内部使用$ rootScope，因为配置块在创建$ rootScope之前运行。可以在配置块内部使用常量和提供程序。如果常量不是您的选项，您可能需要重定向到homeCtrl内的正确URL。

[编辑]从以下评论中添加了可能的解决方案：

选项1：有2条不同的路线

/管理/家
/家

选项2：根据控制器/视图内的权限切换模板

home.html的

<div ng-switch="utilisateur.user.role_id">
    <div ng-switch-when="2">
    <!-- is admin -->
    </div>
    <div ng-switch-default>
    <!-- not admin -->
    </div>
</div>

不是理想的解决方案，但根据您在下面的评论，它可以为您尝试的工作而努力

Answer 2

您的问题似乎有两种不同的观点，在条件基础上您必须重定向观点。

在您的视图中传递url中的参数（创建/编辑链接等）。因为我在登录时设置了cookie并在此处作为参数访问，或者您可以使用不同的方式来访问参数。

'<a href="#/editTest/{{model._id}}/' + getCookie(escape('cformview'))+ '" title="Edit Test"></a>'

$ routeProvider中的配置使用如下：

   $routeProvider.when("/editTest/:ID/:flagTab",
                        {                               
                             templateUrl: function (params) {
                                var flag = params.flagTab;                                    
                                if (flag == 'tabPanelView') {
                                    return '/apps/templates/editTest.html';
                                }
                                else {
                                    return '/apps/templates/editTestPageView.html';
                                }                                    
                            },
                            controller: 'EditTestController'
                        });.

引用链接swtiching views in routeProvider based on condition

Answer 3

下面的代码片段没有描述实现所需目标的不同方法，而是回答了所提出的实际问题：

如何访问templateUrl函数中用$ rootScope定义的变量？

上面的答案和here表示在config / $ routeProvider中无法引用$ rootScope。尽管严格来讲这是正确的，但是有一种简单的方法可以通过$ routeProvider访问$ rootScope。以下是操作方法：

示例HTML：

<div ng-app="myApp">
  <div ng-controller="masterController">
      <script type="text/ng-template" id="home.html">{{something}}</script>
      <a href="#page">Page</a>
      <div ng-view></div>
  </div>
</div>

示例javascript：

var myApp = angular.module('myApp',[],function($routeProvider) {        

$routeProvider
    .when('/home',{templateUrl:'home.html'})
    .when('/page',
    {
      template:'<p>{{something}}</p>', 
      controller:'masterCtrlWrapper'
    })
    .otherwise({redirectTo:'/home'});
});

myApp.controller('masterCtrlWrapper', function($rootScope)
{   $rootScope.changeVariable(); }); 

myApp.controller('masterController', function($rootScope)
{
  $rootScope.something = 'This is the $rootScope talking.'
  $rootScope.pressCount = 0;
  $rootScope.changeVariable = function()
  { $rootScope.something = "This function was run " + $rootScope.pressCount++ + " times."; };
});

Answer 4

就像其他人所说的那样，$rootScope尚不存在，但是与他们的答案不同，它根本不意味着您根本无法使用它，只需要编写代码即可。

Here is your example working，但由于我们没有模板，因此仅打印。

myApp

.provide('home', function() {
    var $rootScope = null;

    this.templateUrl = function() {
        var check =
            $rootScope.utilisateur &&
            $rootScope.utilisateur.user.role_id
        ;

        console.log(check);
        return (check) ? 'partials/home.html' : 'partials/login.html';
    };
    this.controller = 'homeCtrl';
    this.resolve = {load:['$rootScope', function(fetched) { $rootScope = fetched; }]};

    this.$get = function() { };
})

.config(['$routeProvider', 'homeProvider', function($routeProvider, homeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'partials/login.html',
            controller  : 'loginCtrl'
        })
        .when('/home', homeProvider)
        .otherwise({redirectTo:'/'})
    ;
}])

;

在templateUrl函数中使用$ rootScope

4 个答案: