无法在angularjs中通过指令绑定动态html body中的选项 [英] Unable to bind option in dynamic html body by directive in angularjs

问题描述

你好frdz ...我正在学习angularjs ......我需要你的帮助来理解它。我需要创建一个指令，以便我可以动态生成下拉列表（< select>元素）并将下拉值与另一个下拉列表绑定。然后，值正在从服务到本地范围变量正常，但无法与动态创建的html主体绑定。

级别下拉与'selectedLevelOption'正确绑定但其他管辖权下拉选项与'selectedJurisdiction [xid]'绑定



我的指令

hello frdz ...i m learning angularjs...and i need your help to understand it. I need to create a directive so that i can dynamically generate dropdown(<select> element) and bind the value of drop down with respect to another dropdown. Then value is coming properly from service to local scopevariable but unable to bind with html body which is created dynamically.

level dropdown is binding properly with 'selectedLevelOption' but others Jurisdiction dropdown options are are binding with 'selectedJurisdiction[xid]'

My Directive

'use strict';
(function (ng, app) {
    app.directive('jurisdictionSelector', function ($compile, service) {
        return {
            restrict: 'A',
            scope: {
                //title: '@'
            },
            template: '<div class="form-group"></div>',
            link: function (scope, element, attrs, controller) {

                 scope.selectedJurisdiction = [];

                function getJurisdiction(ParentJurisdictionId,xid) {
                    service.getJurisdictionByLevelId(ParentJurisdictionId).then(function (resp) {
                        scope.Jurisdiction = resp.data.GetJurisdictionByLevelIdResult;
                        scope.selectedJurisdiction[xid] = scope.Jurisdiction;
                    }, function (err) {
                        var r = err;
                    });
                }

                function getLevelAll() {
                    service.getLevelAll().then(function (resp) {
                        scope.selectedLevelOption = resp.data.GetLevelAllResult;
                        var strHtml = ' <div class="col-sm-2 control-label">Select Level : </div><div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Level.Level_Name for Level in selectedLevelOption track by Level.M_Level_Id " data-ng-model="Level" ng-change="fillLevel(Level.M_Level_Id)"></select></div> <div class ="panel-body"/>'
                        element.find('.form-group').append($compile(strHtml)(scope))
                    }, function (err) {
                        var r = err;
                    });
                }

                scope.fillLevel = function (value) {
                    element.find('.panel-body').html('');
                    for (var i = 1; i <= value; i++) {

                        var strJurisdiction = '';

                        strJurisdiction += '<div class="form-group">';

                        strJurisdiction += '<div class="col-sm-2 control-label">Level ' + i + '</div>';
                        strJurisdiction += '<div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Jurisdiction' + i + '.Jurisdiction_Name for Jurisdition' + i + ' in selectedJurisdiction['+i+'] track by Jurisdiction' + i + '.M_Jurisdiction_Id " data-ng-model="Jurisdiction' + i + '" ng-change="fillJurisdiction(Jurisdiction' + i + '.M_Jurisdiction_Id)"></select></div>';
                        strJurisdiction += '</div>';
                        element.find('.panel-body').append($compile(strJurisdiction)(scope))
                    }
                    scope.fillJurisdiction = function (value) {
                        getJurisdiction(value,1);
                    }
                }

                getLevelAll();
                getJurisdiction(0,1);
            }
        };
    });
})(angular, mainApp);

我的html页面

my html page

<div jurisdiction-selector></div>
                 <div>

推荐答案

编译，服务）{
return {
restrict：'A'，
范围：{
// title：' @'
}，
模板：'< div class = form-group > < / div > '，
link ：function（scope，element，attrs，controller）{

scope.selectedJurisdiction = [];

函数getJurisdiction（ParentJurisdictionId，xid）{
service.getJurisdictionByLevelId（ParentJurisdictionId）.then（function（resp）{
scope.Jurisdiction = resp.data.GetJurisdictionByLevelIdResult;
scope.selectedJurisdiction [xid] = scope.Jurisdiction;
}，function（err）{
var r = err;
}）;
}

函数getLevelAll（）{
service.getLevelAll（）。then（function（resp）{
scope.selectedLevelOption = resp.data.GetLevelAllResult;
var strHtml ='< div class = col-sm-2 control-标签 > 选择级别：< / div > < div class = < span class =code-keyword> col-sm-6 > < 选择 class = 表格控制选择 - 选择 data-ng-options = 等级Level.M_Level_Id data-ng-model < span class =code-keyword> = 级别 ng-change = fillLevel（Level.M_Level_Id） < span class =code-keyword>> < / select > < / div > < div class = panel-body / > '
element.find（'。form-group'）。append（

compile, service) { return { restrict: 'A', scope: { //title: '@' }, template: '<div class="form-group"></div>', link: function (scope, element, attrs, controller) { scope.selectedJurisdiction = []; function getJurisdiction(ParentJurisdictionId,xid) { service.getJurisdictionByLevelId(ParentJurisdictionId).then(function (resp) { scope.Jurisdiction = resp.data.GetJurisdictionByLevelIdResult; scope.selectedJurisdiction[xid] = scope.Jurisdiction; }, function (err) { var r = err; }); } function getLevelAll() { service.getLevelAll().then(function (resp) { scope.selectedLevelOption = resp.data.GetLevelAllResult; var strHtml = ' <div class="col-sm-2 control-label">Select Level : </div><div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Level.Level_Name for Level in selectedLevelOption track by Level.M_Level_Id " data-ng-model="Level" ng-change="fillLevel(Level.M_Level_Id)"></select></div> <div class ="panel-body"/>' element.find('.form-group').append(

compile（strHtml）（scope））
}，function（err）{
var r = err;
}）;
}

scope.fillLevel = function（value）{
element.find（'。panel-body'）。html（''）;
for（var i = 1; i < = 值; i ++） {

var strjurisdiction =' ' < span class =code-attribute>;

< span class =code-attribute> strJurisdiction + =' < div class =form-group>' ;

strJurisdiction + =' < div class =col-sm-2 control-label>级别 + < span class =code-attribute> i + '< / div > ';
strjurisdiction + ='< div class = col-sm-6 > < 选择 class = 表单控制选择 - 选择 data-ng-options = 司法管辖区'+ i +'.Jurisdiction_Name for Jurisdition'+ i +'in selectedJurisdiction ['+ i +'] track通过司法管辖区'+ i +'.M_Jurisdiction_Id data-ng-model = 司法管辖区'+ i +' ng-change = fillJurisdiction（Jurisdiction'+ i +'。M_Jurisdiction_Id） > < / select > < / div > ';
strJurisdiction + ='< / div > ';
element.find（'。panel-body'）。append（

compile(strHtml)(scope)) }, function (err) { var r = err; }); } scope.fillLevel = function (value) { element.find('.panel-body').html(''); for (var i = 1; i <= value; i++) { var strJurisdiction = ''; strJurisdiction += '<div class="form-group">'; strJurisdiction += '<div class="col-sm-2 control-label">Level ' + i + '</div>'; strJurisdiction += '<div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Jurisdiction' + i + '.Jurisdiction_Name for Jurisdition' + i + ' in selectedJurisdiction['+i+'] track by Jurisdiction' + i + '.M_Jurisdiction_Id " data-ng-model="Jurisdiction' + i + '" ng-change="fillJurisdiction(Jurisdiction' + i + '.M_Jurisdiction_Id)"></select></div>'; strJurisdiction += '</div>'; element.find('.panel-body').append(

compile（strJurisdiction）（scope））
}
scope.fillJurisdiction = function（value）{
getJurisdiction（value，1）;
}
}

getLevelAll（）;
getJurisdiction（0,1）;
}
};
}）;
}）（angular，mainApp）;

compile(strJurisdiction)(scope)) } scope.fillJurisdiction = function (value) { getJurisdiction(value,1); } } getLevelAll(); getJurisdiction(0,1); } }; }); })(angular, mainApp);

我的html页面

my html page

<div jurisdiction-selector></div>
                 <div>

这篇关于无法在angularjs中通过指令绑定动态html body中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！