Question

我正在尝试执行以下操作，当用户登录时，标题链接将更改为使用当前用户的用户名的下拉列表。

当他们退出时，下拉列表将变回指向主页的链接。

当前代码：

app.controller('menuCtrl', function ($rootScope, $location, Data) {
        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            Data.get('session').then(function (results) {
                if (results.uid) {
                    console.log('Change Menu to Logged In Version');
                    $rootScope.menu = "<h3>Logged In</h3>";
                } else {
                    console.log('Changed Menu to Logged Out Version');
                    $rootScope.menu = "<h3>Logged Out</h3>";
                }
            });
        });
});

HTML

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="menuCtrl">
  <div class="container">
    <div class="row">
      <div class="navbar-header col-md-8">
        <a class="navbar-brand" rel="home">Freelancer Portal</a>
      </div>
      <ul class="nav navbar-nav pull-right">
          <li><a href="#">Back to Home</a></li>
      </ul>
    </div>
  </div>
</div>
<div >

任何改进代码的建议都会很棒：）

Answer 1

你可以这样做（你需要使用ngBindHtml）。我会做的有点不同。

这对于menuCtrl来说是这样的：

app.controller('menuCtrl', function ($rootScope, $location, Data) {
        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            Data.get('session').then(function (results) {
                $rootScope.loggedIn = !!results.uid;
            });
        });
});

然后在你看来：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="menuCtrl">

  <div ng-if="loggedIn">You are logged in!</div>
  <div ng-if="!loggedIn">You are not logged in!</div>

  <div class="container">
    <div class="row">
      <div class="navbar-header col-md-8">
        <a class="navbar-brand" rel="home">Freelancer Portal</a>
      </div>
      <ul class="nav navbar-nav pull-right">
          <li><a href="#">Back to Home</a></li>
      </ul>
    </div>
  </div>
</div>
<div >

是否可以将HTML注入$ scope？

1 个答案: