在 Angularjs 中显示欢迎消息

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 : "");
]);

然而，在这种情况下，none甚至是必要的，因为输出是相同的；如果 UserModel.GetuserObject().UserName 是 null，$scope.WelcomeMessage = "Welcome " + UserModel.GetUserObject().UserName; 会 return "Welcome " 而无需执行任何这些 null 检查。在 JavaScript 中，通常不需要进行 null 检查，除非您打算将某些东西 分配给 可能的 null 对象属性 .

换句话说，下面的代码应该是真正需要的：

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

这只会执行一次UserModel.GetUserObject()函数。

在 Angularjs 中显示欢迎消息

Show Welcome Message in Angularjs

angularjs

laravel-5.3