javascript - Angular Controller中的事件仅触发一次

我正在尝试实现自动完成文本框的Angular版本。我找到了一些可行的示例，但似乎都没有表现出我正在得到的行为。

自动完成功能本身可以正常工作。选择建议的项目时，控件将正确处理选择。尽管自动完成位继续起作用，但该控件的后续使用（在自动完成框中键入内容，进行选择）未能激活“选定”事件/条件。

这是我的模块和控制器：

var app = angular.module('myapp', ['angucomplete-alt']); //add angucomplete-alt dependency in app

app.controller('AutoCompleteController', ['$scope', '$http', function ($scope, $http) {

//reset users
$scope.Users = [];
$scope.SelectedUser = null;

//get data from the database
$http({
    method: 'GET',
    url: '/UserRoleAdministration/Autocomplete'
}).then(function (data) {
    $scope.Users = data.data;
}, function () {
    alert('Error');
})

//to fire when selection made
$scope.SelectedUser = function (selected) {
    if (selected) {
        $scope.SelectedUser = selected.originalObject;
    }
}

}]);

我猜那里有问题，但我不知道这是什么。我从下面的观点中总结了一点，尽管似乎没有什么大惊小怪的：

        <div class="form-group">
        <div ng-app="myapp" ng-controller="AutoCompleteController">
            <div angucomplete-alt id="txtAutocomplete" pause="0" selected-object="SelectedUser" local-data="Users" search-fields="RegularName" placeholder="People Search" title-field="RegularName" minlength="2" input-class="form-control" match-class="highlight"></div>
            <!--display selected user-->
            <br /><br />
            <div class="panel panel-default" id="panelResults">
                <div class="panel-heading"><h3 class="panel-title">Manage Roles for {{SelectedUser.RegularName}}</h3></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="~/Images/avatar_blank.png" width="100%" />
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-4">Selected User:</div> <div class="col-md-6">{{SelectedUser.RegularName}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

任何帮助，将不胜感激！

更新

解决了Yaser指出的错误之后，我没有获得有关所选对象的任何信息。因此，我将页面设置为输出整个对象，而不是指定的字段，并且我注意到我正在获取有关所选对象以及后续尝试的信息。

因此可行：{{SelectedUser}}
这不是：{{SelectedUser.Department}}

然后，我查看了该对象并注意到其格式。它具有“标题”和“描述”，描述中包含键/值对。

因此，现在可以使用了：{{SelectedUser.description.Department}}

就是这样。

最佳答案

因为您是第一次将$ scope.SelectedUser设置为函数，但是在其中将对象重写为同一对象。因此，下次不再使用该功能时，请尝试重命名该功能：

$scope.setUser = function (selected) {
    if (selected) {
        $scope.SelectedUser = selected.originalObject;
    }
}

关于javascript - Angular Controller中的事件仅触发一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41130647/