Question

我的Laravel代码就在这里

<a class="navbar-brand" href="{{ url('/') }}">
    @if (Auth::guest())
        {{ config('app.name', 'Laravel') }}
    @else
        Welcome {!! \Auth::user()->UserName !!}
    @endif
</a>

我正在尝试将其转换为Angular Js

这是我在Html中的代码。

<a class="navbar-brand">
    {{WelcomeMessage}}
</a>

和控制器中的代码

myApp.controller("NavController", ["$scope", "UserModel", function($scope, UserModel) {

    $scope.WelcomeMessage = function() {
        debugger;
        if(typeof UserModel.GetUserObject() !== "undefined") {
            return "Welcome " + UserModel.GetUserObject().UserName;
        }
        else {
            return "Welcome ";
        }
    };
}]);

控制器参考存在于布局文件中，但由于某些原因，它甚至没有达到调试器。

我错过了什么吗？

Answer 1

可以简化此控制器代码以设置控制器初始化时的值。

myApp.controller("NavController", ["$scope", "UserModel", function($scope, UserModel) {
    if (UserModel.GetUserObject() !== null) {
      $scope.WelcomeMessage = "Welcome " + UserModel.GetUserObject().UserName;
    } else {
      $scope.WelcomeMessage = "Welcome ";
    }
  }
]);

使用三元运算符可以进一步巩固它：

myApp.controller("NavController", ["$scope", "UserModel", function($scope, UserModel) {
    $scope.WelcomeMessage = "Welcome " + 
                        (UserModel.GetUserObject() ? UserModel.GetUserObject().UserName : "");
]);

然而，在这种情况下，由于输出相同，所以甚至都不需要这些;如果$scope.WelcomeMessage = "Welcome " + UserModel.GetUserObject().UserName;为"Welcome "，则UserModel.GetuserObject().UserName会返回null，而无需执行任何null次检查。在JavaScript中，除非您计划将分配到可能的null对象属性中，否则通常不需要进行null检查。

换句话说，以下代码应该是真正必要的所有代码：

myApp.controller("NavController", ["$scope", "UserModel", function($scope, UserModel) {
    $scope.WelcomeMessage = "Welcome " +  UserModel.GetUserObject().UserName;
]);

这只会一次执行UserModel.GetUserObject()功能。

在Angularjs中显示欢迎消息

1 个答案: