基于 AJAX 响应构建角度视图

Question

我正在尝试开始使用 Angular（1），我有一个布局，其中导航需要根据登录的用户类型进行更改，当页面加载时，我向 API 发送请求到用户对象（我将与页面上的其他控制器共享）。

这是我到目前为止的控制器，

app.controller('DashboardController', function($scope, UserService, $rootScope){
        $scope.loading = true;
        if($scope.loading) {
            $scope.doInitialisation
        }
        $scope.isSuper = function() {
            if($scope.user.isSuper == 1) {
                return true;
            }
            return false;
        }
        UserService.authenticatedUser()
            .then(function(response){
                $scope.loading = false;
                $rootScope.user = response.message;
            }, function(error) {
                $scope.hasError = true;
                $scope.errors = error.message;
            });
    });

在我的模板中，我做了一些类似尝试根据用户类型显示 UL 的事情，

<ul ng-if="isSuper()" ng-include="dashboard/nav/super.html"id="sidebar-menu" class="sf-js-enabled sf-arrows">
</ul><!-- #sidebar-menu -->

我收到以下错误，

无法读取未定义的属性"isSuper"

我认为这是因为 isSuper（） 在我的 ajax 加载之前被触发，有没有办法绕过我们？我可以在 ajax 成功回调的模板中执行我正在执行的操作吗？

有没有更好的方法？

Answer 1

下面的代码片段演示了数据异步到达的时间 Angular 将通过其数据绑定更新视图，以使用 ng-if 指令显示 html 元素。Plunker 例如使用 ng-include 指令

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
DefaultController.$inject = ['$timeout'];
function DefaultController($timeout) {
  var vm = this;
  vm.user = {};
  $timeout(function() {
    vm.user.role = 'admin';
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as vm">
    <div ng-if="vm.user.role === 'admin'">
      <span>Hello, Admin</span>
    </div>
  </div>
</div>