当使用ui路由器和“控制器”作为语法时，如何捕获更改事件来更新控制器/数据？

Question

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

我使用角1.4.x，ui路由器(0.2.15)和Controller作为语法.

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

第一个页面加载工作，我从初始的web服务调用中获得数据，但我无法从下拉框中捕获更改事件并使其重新加载/刷新控制器/数据。

(为了清晰起见，我使用的是哈佛选择的下拉框。“被选中-选择”我正在使用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();

});

部分/模板：

<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>

这是index.html (.cshtml)：

<div class="container-fluid" ng-app="reporting">
    <div class="row" id="holdfilterrow">
        <div class="row">
            <div class="col-xs-12">
                <div id="appslider">
                    <div ui-view="appmodulelist"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
                <div class="col-xs-12 col-md-10">
                    <div class="row">
                        <div class="col-xs-12 col-md-2">
                            <div class="filterboxtext">Cost Center</div>
                            <select id="costcenter" class="chosen-select" data-placeholder="ALL" multiple>
                            <option value=""></option>
                            @foreach (string costcenter in ViewBag.costcenters)
                            {
                                if (costcenter!= "")
                                {
                                    <option value="@costcenter">@costcenter</option>
                                }
                            }
                        </select>
                    </div>
            <<<<snip out rest of select boxes>>>>
                </div>
            </div>
    </div>
</div>

<div class="row">
    <a ui-sref="home">Home Link</a>
</div>



</div>

@section scripts {
    <script src="~/ngApp/Reporting/app.js" type="text/javascript"></script>
    <script src="~/ngApp/Reporting/services.js" type="text/javascript"></script>
    <script src="~/ngApp/Reporting/controller.js" type="text/javascript"></script>
    <script src="~/ngApp/Reporting/controller.appmodule.js" type="text/javascript"></script>
    <script src="~/ngApp/Reporting/controller.subhome.js" type="text/javascript"></script>
    <script src="~/Scripts/chosen.jquery.js" type="text/javascript"></script>
    <script src="~/Scripts/cubewebrequestobject.js" type="text/javascript"></script>
    <link rel="stylesheet" href="~/Content/css/chosen.css" />

    <script>
        $(function () {
            $(".chosen-select").chosen({
                single_backstroke_delete: false,
                search_contains: true,
                no_results_text: "Oops, nothing found!",
                width: "100%"
            });
        });

    </script>
}

这是app.js / state配置：

angular.module('reporting', [
'ui.router',
'ngResource',

'reporting.services',
'reporting.controller'
])

.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider

    .state('home', {
        url: '/',
        views: {
            "appmodulelist": {
                templateUrl: '/ngApp/Reporting/partial-appmodule.html',
                controller: 'AppModulesController as appModulesController'
            },
            "report": {
                //templateUrl: '/ngApp/Reporting/partial-home.html',
                //controller: 'HomeController as homeController'
            }
        }
    })

    .state('subhome', {
        url: '/subhome/:id',
        templateUrl: '/ngApp/Reporting/partial-subhome.html',
        controller: 'SubHomeController as subHomeController'
    })

    .state('dog', {
        url: '/dog',
        views: {
            "appmodulelist@": {
                templateUrl: '/ngApp/Reporting/partial-dog.html'
            }
        }
    });

});

同样清楚的是，当我更改下拉筛选器时，如何捕获更改事件并告诉控制器重新运行/重新加载？

谢谢你的帮助。

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

我找到了办法让它起作用，但感觉不太对劲。由于事件发生在角外，所以我通过JQuery处理外部事件，然后调用角控制器：

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

我不太喜欢这个，但我猜我需要重新构造页面/代码来做一些更纯角度的事情。

Answer 1

您可以在选择时使用ng更改来调用控制器中的方法。

下面是一个小小的例子

<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>