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>

根据ajax响应构建一个角度视图

1 个答案: