javascript - AngularJS 没有更新？

Question

我不知道为什么当它的绑定(bind)对象改变时它没有改变:

我的 HTML:

 <div id="account-info" ng-controller="AuthenticateCtrl">
     <h5>Account: </h5>
     {{account}}
 </div>
 <div ng-controller="AuthenticateCtrl">
    <div modal="shouldBeOpen" options="opts">
        <div class="modal-header">
            <h3>Select your account</h3>
        </div>
        <div class="modal-body">
            <div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
                {{item}}
            </div>
        </div>
    </div>
</div>

我的 JavaScript:

var AuthenticateCtrl = function ($scope) {
    $scope.account= "";

    $scope.open = function() {
        $scope.shouldBeOpen = true;
    };

    $scope.close = function(item) {
        if (item) {
            $scope.shouldBeOpen = false;
            $scope.account= item;
        }
    };
}

由于某种原因，它总是不显示任何内容，或者如果我设置 $scope.account = "ANY STRING"它将显示“ANY STRING”，但在调用关闭函数时不会更新。

Answer 1

好的，尝试一下 fiddle 。首先，您有两个指向同一函数的 ng-controller 指令。其次，我不太了解这里的域，但我猜这就是您所需要的。这是 fiddle .

<div ng-controller="AuthenticateCtrl">
<div id="account-info">
     <h5>Account: </h5>
     {{account.name}}
 </div>
 <div>
    <div modal="shouldBeOpen" options="opts">
        <div class="modal-header">
            <h3>Select your account</h3>
        </div>
        <div class="modal-body">
            <div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
                {{item.name}}
            </div>
        </div>
    </div>
</div>   
</div>

<script>
var myApp = angular.module('myApp',[]);

var AuthenticateCtrl = function ($scope) {

    $scope.opts = {};
    $scope.account = {};

    $scope.items = [
        {'name':'one'},
        {'name':'two'}
    ];

    $scope.open = function() {
        $scope.shouldBeOpen = true;
    };

    $scope.close = function(item) {
        if (item) {
            $scope.shouldBeOpen = false;
            $scope.account= item;
        }
    };
}
</script>