Angularjs 如何在使用ui路由器时捕获更改事件以更新控制器/数据；控制器为；语法？

我相信对于开明的人来说，这是一个相当基本的问题

我使用Angular 1.4.x、ui路由器（0.2.15）和控制器作为语法

应用程序/页面显示特定业务领域的美元金额，并有两个下拉框用于过滤数据（过滤器在web请求中发送到服务，并从服务器检索新数据）

我有第一个页面加载工作，我从最初的web服务调用中获取数据，但我不知道如何从下拉框中捕获更改事件并使其重新加载/刷新控制器/数据

（为了清楚起见，我在下拉框中使用了Choosed by Harvest.“Selected Select”。在后端使用的是ASP.Net MVC 5。）

这是我的控制器：

.controller('AppModulesController', function (UserAppModulesService, $scope, $state) {
var appModulesController = this;

appModulesController.GetData = function () {

    var csCostCenter = $("#costcenter.chosen-select").val();
    var csProvName = $("#providername.chosen-select").val();
    var csProvSpec = $("#providerspecialty.chosen-select").val();
    var csProvStatus = $("#providerstatus.chosen-select").val();
    var csProvSpecType = $("#providerspecialtytype.chosen-select").val();


    // Create a WebRequestObj
    var wro = new WebRequestObj(
        "noname",
        "Cube_MS12",
        [], // the ASP.Net MVC controller selects the Measures, so those will not need to be set here
        [], // this request requires no dimensions
        [new filterObj("[MS Dim Service Date].[Dtof Svc Year Month]", ["CURRENT"])]
    );


    // get the current value of the Chosen Select Filters, and add the values to the WebRequestObj
    if (csCostCenter !== null) { wro.filters.push(new filterObj("[MS Dim Cost Center].[Cost Center Name]", csCostCenter)); }
    if (csProvName !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Name]", csProvName)); }
    if (csProvSpec !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Specialty]", csProvSpec)); }
    if (csProvStatus !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Status]", csProvStatus)); }
    if (csProvSpecType !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Specialty Type]", csProvSpecType)); }


    //send request
    var json = JSON.stringify(wro);
    appModulesController.userAppModules = UserAppModulesService.query({ json: json });  //.$promise.then();
}


appModulesController.GetData();

});

$(document).on("ready", function () {
            $(".chosen-select").on("change", function (evt, params) {
                angular.element('#appmodulecontroller').scope().appModulesController.GetData()
            });
        });

部分/模板：

<div class="appModuleboxes" ng-repeat="userAppModule in appModulesController.userAppModules">
    <div class="appModuleboxName">
    <a ui-sref="subhome({id:userAppModule.Id})">{{userAppModule.Name}}</a>
    </div>
    <div class="appModuleboxValue" id="ambv-{{userAppModule.Id}}">
    {{userAppModule.Value}}
    </div>

</div>

同样，要明确的是，当我更改下拉过滤器时，如何捕获该更改事件并告诉控制器重新运行/重新加载

谢谢你的帮助

=============编辑===========

我找到了让它工作的方法，但感觉不对。由于事件发生在Angular外部，因此我通过JQuery处理外部事件，然后调用Angular控制器：

.controller('AppModulesController', function (UserAppModulesService, $scope, $state) {
var appModulesController = this;

appModulesController.GetData = function () {

    var csCostCenter = $("#costcenter.chosen-select").val();
    var csProvName = $("#providername.chosen-select").val();
    var csProvSpec = $("#providerspecialty.chosen-select").val();
    var csProvStatus = $("#providerstatus.chosen-select").val();
    var csProvSpecType = $("#providerspecialtytype.chosen-select").val();


    // Create a WebRequestObj
    var wro = new WebRequestObj(
        "noname",
        "Cube_MS12",
        [], // the ASP.Net MVC controller selects the Measures, so those will not need to be set here
        [], // this request requires no dimensions
        [new filterObj("[MS Dim Service Date].[Dtof Svc Year Month]", ["CURRENT"])]
    );


    // get the current value of the Chosen Select Filters, and add the values to the WebRequestObj
    if (csCostCenter !== null) { wro.filters.push(new filterObj("[MS Dim Cost Center].[Cost Center Name]", csCostCenter)); }
    if (csProvName !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Name]", csProvName)); }
    if (csProvSpec !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Specialty]", csProvSpec)); }
    if (csProvStatus !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Status]", csProvStatus)); }
    if (csProvSpecType !== null) { wro.filters.push(new filterObj("[MS Dim Provider].[Provider Specialty Type]", csProvSpecType)); }


    //send request
    var json = JSON.stringify(wro);
    appModulesController.userAppModules = UserAppModulesService.query({ json: json });  //.$promise.then();
}


appModulesController.GetData();

});

$(document).on("ready", function () {
            $(".chosen-select").on("change", function (evt, params) {
                angular.element('#appmodulecontroller').scope().appModulesController.GetData()
            });
        });

---

我真的不喜欢这样，但我想我需要重新构造页面/代码，以实现更纯粹的角度

您可以在select上使用ng change调用控制器中的方法

这里有一个小例子

<select ng-change="TransactionCtrl.updateQtyInStock()"  ng-model="TransactionCtrl.currentTransaction.uom" repeat-on="TransactionCtrl.uomList" class="form-control input-lg" selectpicker="{ dropupAuto: false }" toggle-dropdown data-style="btn-white btn-lg">
    <option ng-repeat="uom in TransactionCtrl.uomList" ng-selected="uom.name == TransactionCtrl.currentTransaction.uom" value="{{uom.name}}">
         {{uom.name}}
    </option>
</select>

{{uom.name}

谢谢。是否存在范围问题，因为我要更新的控制器与创建下拉列表的控制器不同（目前我创建的下拉列表没有角度）。那么，当元素不是由TransactionCtrl创建时，我可以调用ng change=“TransactionCtrl.updateQtyInStock（）”吗？有什么原因不能在控制器中创建下拉列表吗？您也可以使用$rootscope，这可能不是一个最佳实践，但它应该可以工作。您的输入让我思考，我找到了一种方法让它工作。我想我最终会把过滤器改成角度处理，或者把数字改成非角度处理。将此标记为答案。