重新定義的變量不在AngularJS中綁定

Question

我是Angular的新手，在創建應用程序時遇到了一個錯誤，即當綁定對象的值更改時，單個AngularJS綁定不會更新。

這是應用程序的縮小版本，因此這就是它的結構如此的原因。 這是HTML：

<div ng-app="userLogin">
  <div ng-controller="loginCtrl">{{currentUser.name}}</div>
</div>

當將值應用於該鍵時，currentUser.name應該更新。 這是假定更新值的Angular腳本：

'use strict';

angular.module("userLogin", [
  'userLogin.controllers',
]);

angular.module('userLogin.controllers', []).controller('loginCtrl', ['$scope', function(
    $scope
  ){
      $scope.users = [
      {
        name: 'Fred Jones',
        username: 'fred.jones',
      }];
      var currentUser = {};
      $scope.myFunction = function(){
         currentUser = $scope.users[0];
         console.log(currentUser.name);
      };
      $scope.myFunction();
    }]);

因此，您看到我有一個名為“用戶”的小數組對象（當前僅包含一個項目）。 然后，我定義了在HTML中綁定的currentUser變量。 然后，運行一個簡單的函數，該函數將currentUser.name定義為等於“ Fred Jones”。

但是，運行腳本時，頁面為空白。 控制台會為currentUser.name吐出正確的更新值，但是HTML綁定沒有按原樣顯示Fred Jones。

我在這里做錯了什么？

這是一個代碼筆演示： http ://codepen.io/anon/pen/JoVBaE

Answer 1

currentUser不在范圍內。 它必須是$scope.currentUser = 。