在指令之间不断更新选择值

问题描述

我正在尝试创建一个HTML select组件，该组件将填充包含多个项目的对象。组件就是这个：

<div class="form-group col-sm-4">
        <select id="institutionControlSelector"
                ng-model="controlItems.selectedOption"
                ng-options="option.name for option in controlItems.availableOptions track by option.id"
                ng-change="ctrl.getInstitutionControlNumber(controlItems.selectedOption)"
                class="form-control">
        </select>
    </div>

这是此HTML模板中的指令：

(function () {
angular
    .module('LaborMarket')
    .directive('laborMarketProgramReview',directive);

function directive() {
    return {
        restrict: 'E',templateUrl: 'jsp/labormarket/labormarket.programreview.template.html',scope: {
            siSectionId: '=',model: '=',orgEntityId: '=',designModeEnabled: '=',isEditable: '=',onChange: '&'
        },controller: controller,controllerAs: 'ctrl',bindToController: true,priority: 8000
    };
}

controller.$inject = ['$scope','ProgramReviewService'];

function controller($scope,ProgramReviewService) {
    var vm = this;
    $scope.controlItems = {
        availableOptions: [{id: 0,name: 'Select an option'},{id: 1,name: 'Public Institution'},{
            id: 2,name: 'Private Nonprofit Institution'
        },{id: 3,name: 'Private For-profit Institution'},{id: 4,name: 'Not Available'}],selectedOption: {id: 0,name: 'Select an option'}
    };
    vm.controlOptionNumber = getInstitutionControlNumber($scope.controlItems.selectedOption);


    vm.getInstitutionControlNumber = getInstitutionControlNumber;
 }

function getInstitutionControlNumber(controlOption) {
        var controlNumber = 0;
        switch (controlOption.name) {
            case 'Public Institution':
                controlNumber = 1;
                break;
            case 'Private Nonprofit Institution':
                controlNumber = 2;
                break;
            case 'Private For-profit institution':
                controlNumber = 3;
                break;
            case 'Not Available':
                controlNumber = -3;
                break;
        }
        $scope.$broadcast('controlNumber',controlNumber);
        return controlNumber;
    }

我想做的是，当我在此下拉列表中选择某项内容时，它应该采用选择的值并将其发送到另一个指令，该指令根据我发送的值绘制表格。它可以与事件解决方案一起很好地工作，但是问题在于，当页面第一次广播时，由于未知原因而第一次启动（刚进入）时，位于第二个指令的指令的链接部分（如下）一种），它是未定义的，但更改后可以使用。

我对AngularJS还是很陌生，所以我不知道我对事件的处理是不是一个好习惯。

(function () {
angular
    .module('LaborMarket')
    .directive('laborMarket',directive);

function directive() {

    return {
        restrict: 'E',require: '^laborMarketProgramReview',templateUrl: 'jsp/labormarket/labormarket.template.html',scope: {
            topCode: '=',cipCode: '=',enableWatchers: '='
        },priority: 8000,link: function (scope) {
            scope.$on('controlNumber',function (e,data) {
                console.log("Datos: ",data);
                this.controlNumber = data;
            });
        }
    };
}

//function that builds the table based on the dropdown value
function completionDetails(completionDataList) {
        var filteredCompletionList = [];
        console.log("Control number: ",this.controlNumber);
        vm.laborMarketForCompleterData = _.slice(
            _.orderBy(completionDataList,['completersCount'],['desc']),5
        );
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularjs-directive angularjs-scope