0
http://mfauveau.github.io/angular-query-builder/の例に従っており、要件に適合するように修正しています。角度：ネストされた指令の渡されたパラメータは状態 "未定義"です
指令（「querybuilder」、画像の黄色部分、jsファイル）が組み込まれたモーダル表示（.jsp）があります。コントローラ（「addEditRuleSetCtrl」という名前の）とディレクティブは上位レベルからインクルードされています。
私たちのようにビュー（.jspというファイル）からの指令を開始しました：
<div ng-init="addEditRuleSetCtrl.initSelectors()">
<query-builder group="addEditRuleSetCtrl.filter.group"
rule-condition-operators="addEditRuleSetCtrl.ruleConditionOperators"
rule-condition-set-operators="addEditRuleSetCtrl.ruleConditionSetOperators"
fields="addEditRuleSetCtrl.getCorrespondingFields()"
></query-builder>
</div>
そして、ディレクティブがあることに注意してください（と私たちはビュー/ .jspファイル内のディレクティブのテンプレートが含まれています新しいグループが作成されたときに、ここで再び開始）：
<script type="text/ng-template" id="/queryBuilderDirective.html">
<div class="alert alert-warning alert-group">
<div class="form-inline">
<select ng-options="o as o.operator for o in ruleConditionSetOperators" ng-model="group.operator" class="form-control input-sm"></select>
<button style="margin-left: 5px" ng-click="addCondition()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Condition</button>
<button style="margin-left: 5px" ng-click="addGroup()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Group</button>
<button style="margin-left: 5px" ng-click="removeGroup()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span> Remove Group</button>
</div>
<div class="group-conditions">
<div ng-repeat="rule in group.rules | orderBy:'index'" class="condition">
<div ng-switch="rule.hasOwnProperty('group')">
<div ng-switch-when="true">
<query-builder group="rule.group"
rule-condition-operators="addEditRuleSetCtrl.ruleConditionOperators"
rule-condition-set-operators="addEditRuleSetCtrl.ruleConditionSetOperators"
fields="addEditRuleSetCtrl.getCorrespondingFields()"
></query-builder>
</div>
<div ng-switch-default="ng-switch-default">
<div class="form-inline">
<select ng-options="t.name as t.name for t in fields" ng-model="rule.field" class="form-control input-sm"></select>
<select style="margin-left: 5px" ng-options="c as c.operator for c in ruleConditionOperators" ng-model="rule.condition" class="form-control input-sm"></select>
<input style="margin-left: 5px" type="text" ng-model="rule.data" class="form-control input-sm"/>
<button style="margin-left: 5px" ng-click="removeCondition($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
私たちの問題は：ツリー/グループの最初の層は、すべてのパラメータ（フィールド、ルール条件セット演算子、ルール条件演算子）の正しい値を持っています。したがって、最初のレイヤーでは、すべての関連するドロップダウンが正しい値を表示しています。しかし、最初のレイヤーで "グループを追加"ボタンをクリックすると、すべてのパラメーターが "未定義"になり、2番目のレイヤーから始まるすべてのドロップダウンが空になります（画像の赤い矢印記号で示されます）。
質問は、次のとおり
- は、それらがビューブロックの外側 に定義されているため、グループの第2層から出発し、 paramsは、コントローラの範囲外正しいことことはありますか？
- グループのすべてのレイヤでパラメータを使用できるようにするにはどうすればよいですか？
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <link href="<c:url value='aviato/ruleEngine/addEditRuleSet/css/addeditruleset.css' />" rel="stylesheet"> </link> <%--<script src="aviato/ruleEngine/addEditRuleSet/directive/addEditRuleSet_directive.js"></script>--%> <form name="addEditRuleSetModalForm" novalidate class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> {{addEditRuleSetCtrl.windowHeader}} <button type="button" class="btn btn-danger btn-sm pull-right" ng-click="addEditRuleSetCtrl.close()" data-toggle="uibtooltip" title="Cancel" > <span class="glyphicon glyphicon-remove-sign"></span> </button> </h4> </div> <div class="modal-body"> Hello world [origin] : {{ addEditRuleSetCtrl.origin }} <br /> Hello world [iceField] : {{ addEditRuleSetCtrl.iceField }} Output: {{ addEditRuleSetCtrl.output }} <div class="alert alert-info"> <strong>Example Output</strong><br> Output: {{ addEditRuleSetCtrl.output }} </div> <div ng-init="addEditRuleSetCtrl.initSelectors()"> <query-builder group="addEditRuleSetCtrl.filter.group" rule-condition-operators="addEditRuleSetCtrl.ruleConditionOperators" rule-condition-set-operators="addEditRuleSetCtrl.ruleConditionSetOperators" fields="addEditRuleSetCtrl.getCorrespondingFields()" ></query-builder> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary btn-sm" ng-click="addEditRuleSetCtrl.test()" data-toggle="tooltip" ><span class="glyphicon glyphicon-ok-sign" ></span></button><span></span> </div> </div> </form> <script type="text/ng-template" id="/queryBuilderDirective.html"> <div class="alert alert-warning alert-group"> <div class="form-inline"> <select ng-options="o as o.operator for o in ruleConditionSetOperators" ng-model="group.operator" class="form-control input-sm"></select> <button style="margin-left: 5px" ng-click="addCondition()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Condition</button> <button style="margin-left: 5px" ng-click="addGroup()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Group</button> <button style="margin-left: 5px" ng-click="removeGroup()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span> Remove Group</button> </div> <div class="group-conditions"> <div ng-repeat="rule in group.rules | orderBy:'index'" class="condition"> <div ng-switch="rule.hasOwnProperty('group')"> <div ng-switch-when="true"> <query-builder group="rule.group" rule-condition-operators="addEditRuleSetCtrl.ruleConditionOperators" rule-condition-set-operators="addEditRuleSetCtrl.ruleConditionSetOperators" fields="addEditRuleSetCtrl.getCorrespondingFields()" ></query-builder> </div> <div ng-switch-default="ng-switch-default"> <div class="form-inline"> <select ng-options="t.name as t.name for t in fields" ng-model="rule.field" class="form-control input-sm"></select> <select style="margin-left: 5px" ng-options="c as c.operator for c in ruleConditionOperators" ng-model="rule.condition" class="form-control input-sm"></select> <input style="margin-left: 5px" type="text" ng-model="rule.data" class="form-control input-sm"/> <button style="margin-left: 5px" ng-click="removeCondition($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button> </div> </div> </div> </div> </div> </div> </script>指令（.jsファイル）：ここ
ビュー（の.jspファイル）である
AddEditRuleSetApp.directive('queryBuilder', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
group: '=',
ruleConditionOperators: '=',
ruleConditionSetOperators: '=',
fields: '='
},
templateUrl: '/queryBuilderDirective.html',
compile: function (element, attrs) {
var content, directive;
content = element.contents().remove();
return function (scope, element, attrs) {
scope.addCondition = function() {
window.alert("[addCondition] : " + "group : " + JSON.stringify(scope.group) + "...BREAK..."
+"fields : " + JSON.stringify(scope.ruleConditionOperators) + "...BREAK..."
+"Condition : "+JSON.stringify(scope.ruleConditionOperators) + "...BREAK..."
+"Condition set: "+JSON.stringify(scope.ruleConditionSetOperators));
scope.group.rules.push({
condition: '=',
field: 'Firstname',
data: ''
});
};
scope.removeCondition = function (index) {
scope.group.rules.splice(index, 1);
};
scope.addGroup = function() {
window.alert("[addGroup] :" + "group : " + JSON.stringify(scope.group) + "...BREAK..."
+" fields : " + JSON.stringify(scope.fields) + "...BREAK..."
+"Condition : "+JSON.stringify(scope.ruleConditionOperators) + "...BREAK..."
+"Condition set: "+JSON.stringify(scope.ruleConditionSetOperators));
scope.group.rules.push({
group: {
operator: 'AND',
rules: []
}
});
};
scope.removeGroup = function() {
"group" in scope.$parent && scope.$parent.group.rules.splice(scope.$parent.$index, 1);
};
directive || (directive = $compile(content));
element.append(directive(scope, function ($compile) {
return $compile;
}));
}
}
}
}]);
コントローラ：
AddEditRuleSetApp.controller('AddEditRuleSetModalController', [ '$scope', '$rootScope', '$uibModalInstance','RuleEngineService', 'origin', 'iceField','FileService',
function($scope, $rootScope , $uibModalInstance, RuleEngineService, origin, iceField, FileService)
{
var self = this;
self.origin = origin;
self.iceField = iceField;
self.data = '{"group": {"operator": "AND","rules": []}}';
self.output = 'bologna';
self.fieldsDDE = [
{ name: 'FirstnameDDE' },
{ name: 'LastnameDDE' },
{ name: 'BirthdateDDE' },
{ name: 'CityDDE' },
{ name: 'CountryDDE' }
];
self.fieldsATT = [
{ name: 'FirstnameATT' },
{ name: 'LastnameATT' },
{ name: 'BirthdateATT' },
{ name: 'CityATT' },
{ name: 'CountryATT' }
];
self.ruleConditionSetOperators = [
];
self.ruleConditionOperators = [
];
self.filter = JSON.parse(self.data);
self.initSelectors = function()
{
self.getRuleConditionOperators();
self.getRuleConditionSetOperators();
}
self.getRuleConditionOperators = function()
{
if (self.ruleConditionOperators.length == 0)
{
RuleEngineService.getAllRuleConditionOperators()
.then(
function(d)
{
self.ruleConditionOperators = d;
},
function(errResponse)
{
console.error('Error while fetching rule-condition-operators');
}
);
}
return self.ruleConditionOperators;
};
self.getRuleConditionSetOperators = function()
{
if (self.ruleConditionSetOperators.length == 0)
{
RuleEngineService.getAllRuleConditionSetOperators()
.then(
function(d)
{
self.ruleConditionSetOperators = d;
},
function(errResponse)
{
console.error('Error while fetching rule-condition-operators');
}
);
}
return self.ruleConditionSetOperators;
};
self.htmlEntities = function(str)
{
return String(str).replace(/</g, '<').replace(/>/g, '>');
};
self.displayErrorMessages = false;
self.createSuccess = '';
self.createHeader = '';
self.backendErr = "";
self.windowHeader = "Create/Edit Rule Group";
self.close = function()
{
$uibModalInstance.close();
};
self.getCorrespondingFields = function()
{
// window.alert("---------------Reached client side controller to getCorrespondingFields");
return self.origin == 'DDE' ? self.fieldsDDE : self.fieldsATT;
};
self.computed = function(group)
{
window.alert("Inside controller: computed");
if (!group) return "";
for (var str = "(", i = 0; i < group.rules.length; i++) {
i > 0 && (str += " <strong>" + group.operator + "</strong> ");
str += group.rules[i].group ?
self.computed(group.rules[i].group) :
group.rules[i].field + " " +
//htmlEntities(group.rules[i].condition)
group.rules[i].condition
+ " " + group.rules[i].data;
}
return str + ")";
};
$scope.$watch('filter', function (newValue)
{
self.output = self.computed(newValue);
}, true);
self.test = function()
{
window.alert(JSON.stringify(self.filter));
};
}
]);
スクリーンショット：
が、私はここに任意の助けを得ることはできますか？前もって感謝します。