Angularjs Angular JS:在指令实例化期间,控制器中的一个函数已到达,另一个函数未从视图到达
我有一个模式视图(.jsp),它有一个集成指令(名为'querybuilder',图片中的黄色部分是一个js文件)。控制器(名为'addEditRuleSetCtrl')和指令是从上层包含的,包含似乎很好。我们从以下角度启动了该指令:Angularjs Angular JS:在指令实例化期间,控制器中的一个函数已到达,另一个函数未从视图到达,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有一个模式视图(.jsp),它有一个集成指令(名为'querybuilder',图片中的黄色部分是一个js文件)。控制器(名为'addEditRuleSetCtrl')和指令是从上层包含的,包含似乎很好。我们从以下角度启动了该指令: <query-builder group="addEditRuleSetCtrl.filter.group" ruleConditionOperators="addEditRuleSetCtrl.getRuleC
<query-builder group="addEditRuleSetCtrl.filter.group"
ruleConditionOperators="addEditRuleSetCtrl.getRuleConditionOperators()"
fields="addEditRuleSetCtrl.getCorrespondingFields()"
></query-builder>
现在我看到的问题是“addEditRuleSetCtrl.getCorrespondingFields()”工作正常(到达控制器,将数据映射到“field”,因此关联的下拉字段显示正确的数据),但看起来“addEditRuleSetCtrl.getRuleConditionOperators()”甚至没有到达控制器内定义的函数(我在控制器中的函数中有一个window.alerm(),它没有显示),因此关联的下拉列表是空的(在屏幕截图中,它由上箭头指向)。
我们正在使用angularjs 1.4.4和java 1.8
下面是详细的描述,这是我的JSP视图、指令和控制器:
模态视图(这是一个JSP文件,包括指令使用的模板):
<%@ 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 }}
ahahahhaahahahahaahahhg1111!!!!! {{ addEditRuleSetCtrl.output }}
<div class="alert alert-info">
<strong>Example Output</strong><br>
<%--<span ng-bind-html="addEditRuleSetCtrl.output"></span>--%>
ahahahhaahahahahaahahhg!!!!! {{ addEditRuleSetCtrl.output }}
</div>
<query-builder group="addEditRuleSetCtrl.filter.group"
ruleConditionOperators="addEditRuleSetCtrl.getRuleConditionOperators()"
fields="addEditRuleSetCtrl.getCorrespondingFields()"
></query-builder>
</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.operator as o.name 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"></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.name as c.name for c in ruleConditionOperators" ng-model="rule.condition" class="form-control input-sm"></select>--%>
<select style="margin-left: 5px" ng-options="c.name as c.name 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>
AddEditRuleSetApp.directive('queryBuilder', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
group: '=',
ruleConditionOperators: '=',
fields: '='
},
templateUrl: '/queryBuilderDirective.html',
compile: function (element, attrs) {
var content, directive;
content = element.contents().remove();
return function (scope, element, attrs) {
scope.ruleConditionSetOperators = [
{ name: 'AND' },
{ name: 'OR' }
];
/* scope.ruleConditionOperators = [
{ name: '=' },
{ name: '<>' },
{ name: '<' },
{ name: '<=' },
{ name: '>' },
{ name: '>=' }
];*/
scope.addCondition = function () {
scope.group.rules.push({
condition: '=',
field: 'Firstname',
data: ''
});
};
scope.removeCondition = function (index) {
scope.group.rules.splice(index, 1);
};
scope.addGroup = function () {
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;
}));
}
}
}
}]);
{{addEditRuleSetCtrl.windowHeader}
你好,世界[origin]:{{addEditRuleSetCtrl.origin}
Hello world[iceField]:{{addEditRuleSetCtrl.iceField}
ahahahahahag1111!!!!{{addEditRuleSetCtrl.output}}
示例输出
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
附加条件
添加组
删除组
指令:(这是一个.js文件。如果我在这里取消注释'scope.ruleConditionOperators',红色箭头指向的下拉列表将显示数据)
<%@ 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 }}
ahahahhaahahahahaahahhg1111!!!!! {{ addEditRuleSetCtrl.output }}
<div class="alert alert-info">
<strong>Example Output</strong><br>
<%--<span ng-bind-html="addEditRuleSetCtrl.output"></span>--%>
ahahahhaahahahahaahahhg!!!!! {{ addEditRuleSetCtrl.output }}
</div>
<query-builder group="addEditRuleSetCtrl.filter.group"
ruleConditionOperators="addEditRuleSetCtrl.getRuleConditionOperators()"
fields="addEditRuleSetCtrl.getCorrespondingFields()"
></query-builder>
</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.operator as o.name 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"></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.name as c.name for c in ruleConditionOperators" ng-model="rule.condition" class="form-control input-sm"></select>--%>
<select style="margin-left: 5px" ng-options="c.name as c.name 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>
AddEditRuleSetApp.directive('queryBuilder', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
group: '=',
ruleConditionOperators: '=',
fields: '='
},
templateUrl: '/queryBuilderDirective.html',
compile: function (element, attrs) {
var content, directive;
content = element.contents().remove();
return function (scope, element, attrs) {
scope.ruleConditionSetOperators = [
{ name: 'AND' },
{ name: 'OR' }
];
/* scope.ruleConditionOperators = [
{ name: '=' },
{ name: '<>' },
{ name: '<' },
{ name: '<=' },
{ name: '>' },
{ name: '>=' }
];*/
scope.addCondition = function () {
scope.group.rules.push({
condition: '=',
field: 'Firstname',
data: ''
});
};
scope.removeCondition = function (index) {
scope.group.rules.splice(index, 1);
};
scope.addGroup = function () {
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.directive('queryBuilder',['$compile',函数($compile){
返回{
限制:'E',
范围:{
组:“=”,
ruleConditionOperators:“=”,
字段:'='
},
templateUrl:“/queryBuilderDirective.html”,
编译:函数(元素、属性){
var内容、指令;
content=element.contents().remove();
返回函数(范围、元素、属性){
scope.ruleConditionSetOperators=[
{name:'和'},
{name:'或'}
];
/*scope.ruleConditionOperators=[
{name:'='},
{名称:''},
{name:'='}
];*/
scope.addCondition=函数(){
scope.group.rules.push({
条件:'=',
字段:“Firstname”,
数据:“”
});
};
scope.removeCondition=函数(索引){
范围、组、规则、拼接(索引1);
};
scope.addGroup=函数(){
scope.group.rules.push({
组:{
接线员:'和',
规则:[]
}
});
};
scope.removeGroup=函数(){
作用域$parent&&scope.$parent.group.rules.splice中的“组”(作用域$parent.index,1);
};
指令| |(指令=$compile(content));
追加(指令(作用域、函数($compile)){
返回$compile;
}));
}
}
}
}]);
控制器:
AddEditRuleSetApp.controller( 'AddEditRuleSetModalController', [ '$scope', '$rootScope', '$uibModalInstance','RuleEngineService', 'origin', 'iceField',
function( $scope, $rootScope , $uibModalInstance, RuleEngineService, origin, iceField )
{
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.ruleConditionOperators = [
{ name: '=' },
{ name: '<>' },
{ name: '<' },
{ name: '<=' },
{ name: '>' },
{ name: '>=' }
];
self.clientChanged = function( selCleintId )
{
self.getAllMachinesForClientForDuplication( self.duplicateClient );
self.displayErrorMessages = false;
}
self.getRuleConditionOperators = function()
{
window.alert("--------*******---------Reached client side controller to getAllRuleConditionOperators");
return self.ruleConditionOperators;
/* RuleEngineService.getAllRuleConditionOperators( )
.then(
function( d )
{
self.ruleConditionOperators = d;
},
function( errResponse )
{
console.error( 'Error while fetching rule-condition-operators' );
}
);
*/
};
self.htmlEntities = function(str)
{
return String(str).replace(/</g, '<').replace(/>/g, '>');
};
//self.output = null;
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 + ")";
};
//self.json = null;
self.filter = JSON.parse(self.data);
$scope.$watch('filter', function (newValue)
{
self.output = self.computed(newValue);
}, true);
self.test = function()
{
window.alert(JSON.stringify( self.filter) );
};
}
]);
AddEditRuleSetApp.controller('AddEditRuleSetModalController'、['$scope'、'$rootScope'、'$uibModalInstance'、'RuleEngineService'、'origin'、'iceField',
函数($scope、$rootScope、$uibModalInstance、RuleEngineService、origin、iceField)
{
var self=这个;
自我起源=起源;
self.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.ruleConditionOperators=[
{name:'='},
{名称:''},
{name:'='}
];
self.clientChanged=函数(selCleintId)
{
self.getAllMachinesForClientForDuplication(self.duplicateClient);
self.displayErrorMessages=false;
}
self.getRuleConditionOperators=函数()
{
window.alert(“----------******-----------已到达客户端控制器以获取所有RuleConditionOperators”);
返回self.ruleConditionOperators;
/*RuleEngineService.getAllRuleConditionOperators()
.那么(
职能(d)
{