Question

我在同一个模板中定义了两个ng-if来调用同一个控制器的函数：

<div ng-controller="UserController">
    <!-- WORKS :) -->
    <p>{{ user.name }}</p>

    <!--WORKS :)-->
    <div ng-if="showThingOne()">
        <h2>Thing One</h2>
    </div>

    <!--DOESN'T WORK :( ; TypeError: Cannot read property 'role' of undefined -->
    <div ng-if="showThingTwo(user)">
        <h2>Thing Two</h2>
    </div>
</div>


angular.module('MyApp')
    .controller('UserController', ['$rootScope', '$scope', 'User', function ($rootScope, $scope, User) {
        var getCurrentUser = function () {
            User.current(function (user) {
               $scope.user = user;
               $rootScope.currentUser = user;
            });
        };
        getCurrentUser();

        $scope.showThingOne = function () {
            return $scope.user.role === 'Thing One Seer';  
        };

        $scope.showThingTwo = function (user) {
            return user.role === 'Thing Two Seer';  
        };
    }]);

第二个符合我读过的关于单元测试的一堆东西，而第一个总是标记为“不要这样做”，所以我想以第二种方式编写我的函数。另外，我想了解为什么第一部作品而第二部作品没有;我猜这与在$ digest期间如何编译DOM有关，但这只是随机猜测而在Angular源或文档中没有真正的支持。

Answer 1

User.current是一个异步函数，因此在dom编译后结果就可以了。

showThingOne没有要在编译时计算的参数。

<强>解决方案

添加

 $scope.user = {};

作为用户控制器的第一行。

   angular.module('MyApp')
        .controller('UserController', ['$rootScope', '$scope', 'User', function ($rootScope, $scope, User) {
$scope.user = {};
            var getCurrentUser = function () {
                User.current(function (user) {
                   $scope.user = user;
                   $rootScope.currentUser = user;
                });
            };
            getCurrentUser();

            $scope.showThingOne = function () {
                return $scope.user.role === 'Thing One Seer';  
            };

            $scope.showThingTwo = function (user) {
                return user.role === 'Thing Two Seer';  
            };
        }]);

Answer 2

这不起作用，因为永远不会使用user：

$scope.showThingTwo = function (user) {
    return $scope.user.role === 'Thing Two Seer';  
};

仅使用$scope.user.role（但不是user参数）且仍然设置为'Thing One Seer'值。

如果您像这样使用它，它可能会以您想要的方式工作：

$scope.showThingTwo = function (user) {
    if (user) {
        return user.role === 'Thing Two Seer';  
    }
    return false;
};

了解ng-if和DOM编译

2 个答案: