AngularJs:传递给指令的四个参数之一是未定义的

时间:2017-01-19 22:55:54

标签: angularjs angularjs-directive

我有一个模态视图(.jsp),它集成了指令(命名为' querybuilder',图片中的黄色部分 - 一个js文件)。控制器(命名为' addEditRuleSetCtrl')和指令包含在上层,包含似乎很好。我们从以下观点发起了指令:

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.fieldCodes = [];

self.ruleConditionSetOperators = [];

self.ruleConditionOperators = [];

其中" addEditRuleSetCtrl.initSelectors()"启动传递给指令的所有参数:

<%@ 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.fieldCodes"
                               ></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.fieldCodes"
                            ></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>

这些参数以这种方式在控制器中声明:

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.fields = scope.$parent.fieldCodes;
            scope.ruleConditionOperators = scope.$parent.ruleConditionOperators;
            scope.ruleConditionSetOperators = scope.$parent.ruleConditionSetOperators;

            window.alert("HEYYYYYY I'M CHANGING!!!!!! "
                + JSON.stringify(scope.group)
                + " ;  "+ JSON.stringify(scope.ruleConditionOperators)
                + " ;  "+ JSON.stringify(scope.ruleConditionSetOperators)
                + " ;  "+ JSON.stringify(scope.fields));



                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;
                }));
            }
        }
    }
}]);

问题是:传递给指令的四个参数中的一个(参数&#39; fieldCodes&#39;)是&#34;未定义&#34;虽然他们被定义,但以类似的方式传递。我已经清理了缓存并测试了所有可能的方法,但没有任何区别。因此相关的下拉列表是空的(在屏幕截图中的红色箭头下拉列表中)。任何线索

完整视图:

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.filter = JSON.parse(self.data);

            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.fieldCodes = [];

            self.ruleConditionSetOperators = [];

            self.ruleConditionOperators = [];

            self.initSelectors  = function()
            {
                self.getRuleConditionOperators();
                self.getRuleConditionSetOperators();
                self.fieldCodes = self.getCorrespondingFields();
                console.log("initSelectors : fieldCodes: " + JSON.stringify(self.fieldCodes ));
            }

            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, '&lt;').replace(/>/g, '&gt;');
            };



            self.displayErrorMessages = false;
            self.createSuccess = '';
            self.createHeader = '';
            self.backendErr = "";

            self.windowHeader = "Create/Edit Rule Group";


            self.close = function()
            {
                $uibModalInstance.close();
            };

            self.getCorrespondingFields = function()
            {
                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.json = JSON.stringify(newValue, null, 2);
                //TODO: do we need this??
                //if( angular.isDefined( newValue ) )
                //{
                //window.alert("I am here again in watch!!!!" + JSON.stringify(newValue));
                self.output = self.computed(newValue);
               // self.ruleConditionOperators = self.getAllRuleConditionOperators();
                 //   window.alert("I am HERE - end watch!!!!");
                //}
            }, true);

            self.test = function()
            {
                window.alert(JSON.stringify( self.filter) );
            };

        } 
    ]);

指令:

<script src="/js/des.js"></script>
<script>
var key = '12345678';
var message = 'hello world';

var ciph = des(key, message, 1, 0);
ciph = stringToHex(ciph);
console.log("Encrypted Result: " + ciph);
</script> 

控制器:

$key = '12345678';
$hexa = '0x28dba02eb5f6dd476042daebfa59687a'; /This is the output from Javascript
$string = '';
for ($i=0; $i < strlen($hexa)-1; $i+=2) {
$string .= chr(hexdec($hexa[$i].$hexa[$i+1])); }
echo mcrypt_decrypt(MCRYPT_DES, $key, $string, MCRYPT_MODE_ECB);

屏幕截图:

enter image description here

1 个答案:

答案 0 :(得分:0)

在我第一眼看到该指令时,我认为您可能应该改变:

var test = scope.$parent.fieldCodes;
scope.fields = scope.$parent.fields;

要:

//var test = scope.$parent.fieldCodes;
  scope.fields = scope.$parent.fieldCodes;