当控制器中的范围值更改时，AngularJS ng-model 不会更新

Question

在 html 中：

<md-card-title-text ng-controller="ProfileCtrl">
  <span ng-model="user.displayName" class="md-headline">userName</span>
  <span ng-model="user.email" class="md-subhead">user@abc.com</span>
</md-card-title-text> 

在 angularjs 代码中：

angular.module('authApp')
  .controller('ProfileCtrl', function($scope) {
    $scope.user = {};
    $scope.user.displayName = localStorage.username;
    $scope.user.email = localStorage.email;
    console.log($scope.user.displayName)
  }); 

问题是 ng-model 在控制器中更改范围值时不会更新。我该如何解决这个问题？

Answer 1

尝试使用 ng-bind 作为 span：AngularJS - ng-model fails on <span>

angular.module('authApp')
    .controller('ProfileCtrl', function ($scope) {
        $scope.user = {displayName : 'userName', email: 'user@abc.com'};
        $scope.user.displayName = localStorage.username;
        $scope.user.email = localStorage.email;
        console.log($scope.user.displayName)
});

HTML：

<md-card-title-text ng-controller="ProfileCtrl">
     <span ng-bind="user.displayName" class="md-headline"></span>
     <span ng-bind="user.email" class="md-subhead"></span>
</md-card-title-text>

或者只是<span class="md-headline">{{user.displayName}}</span>

Answer 2

你可以使用

<md-card-title-text ng-controller="ProfileCtrl">
   <span class="md-headline">{{user.displayName}}</span>
   <span class="md-subhead">{{user.email}}</span>
</md-card-title-text>

或

ng-bind-html="user.email"