当控制器中的范围值更改时，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进行跨度： AngularJS-ng-model在<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"