Question

我是AngularJS社区的新手，希望有人可以帮我解决以下问题。

我创建了一个基于不完整教程的轻型CMS系统，并且自己填写了一些部分，但是当$ scope更改时我无法更新HTML部分;

HTML partial（admin-login.html）

<div ng-if="loggedInUser">
Welcome {{loggedInUser}} |  <a href="admin/pages">My Admin</a> | <a href="admin/logout">Logout</a>
</div>

我的指令（directives.js）

directive('adminLogin', [
  function() {
    return {
      controller: function($scope, $cookies) {
        var user = $cookies.get('loggedInUser', {path: "/"});
        $scope.loggedInUser = user;
      },
      templateUrl: 'partials/directives/admin-login.html'
    };
  }
])

我的控制器（controllers.js）

controller('AdminLoginCtrl', ['$scope', '$location', '$cookies', 'AuthService','$log','flashMessageService',
    function($scope, $location, $cookies, AuthService, $log, flashMessageService) {
      $scope.credentials = {
        username: '',
        password: ''
      };
      $scope.login = function(credentials) {
        AuthService.login(credentials).then(
          function(res, err) {
            $cookies.put('loggedInUser', res.data);
            $location.path('/admin/pages');
          },
          function(err) {
            flashMessageService.setMessage(err.data);

            $log.log(err);
          });
        };
    }
])

范围更新但我必须刷新页面以显示或隐藏admin-login.html。

非常感谢任何帮助，谢谢你。

Answer 1

更新Cookie后，

$scope.loggedInUser无法更新，您应该注意指令中的Cookie更改并手动更新$scope。

directive('adminLogin', [
  function() {
    return {
      controller: function($scope, $cookies) {
        $scope.$watch(function () {
          return $cookies.get('loggedInUser', {path: "/"});
        }, function (value) {
          $scope.loggedInUser = value;
        });
      },
      templateUrl: 'partials/directives/admin-login.html'
    };
  }
])

AngularJS：HTML partials ng-if如果不更新$ scope.loggedInUser更新

1 个答案: