Question

我想从Angular的自定义元素中传递Grails JSON对象指令作为Angular指令的属性值。我试过这个。但是attrs值是作为字符串接收的。但我需要 JSON数据。无论它是什么，我需要遍历json或转换指令方面的JSON字符串。我试过了angular.toJson()，但它没有用。

我的指示：

gateApp.directive('angInputSelect',function(){
    return{
        restrict : 'E',
        controller : 'moveTaskRuleDefCtrl',
        scope : {
            dirData : '@',
        },
        replace : true,
        link : function(scope, elem, attrs) {
            scope.taskCreateForm = attrs.dirData;
            console.log(scope.taskCreateForm);                          
        }
    }
});

我的指示模板：

<ang-input:select dir-data="${com.aa.fsight.MoveTaskRuleDef.MoveTaskType.class.getEnumConstants().collect{[name:it.name(), type: it.type]}}" ></ang-input:select>

执行Html gsp模板：

<section class="col col-3 required" label-head="Type" dir-name="moveTaskType" dir-id="moveTaskType" dir-class="select2 multiSelect selectElement" dir-model="taskCreateForm.moveTaskType" section-class="col col-3 required" dir-data="[{name=PULL, type=PULL}, {name=SPOT, type=SPOT}, {name=PULL_SPOT, type=PULL SPOT}, {name=DOCKBUMP, type=DOCKBUMP}, {name=YARD_MOVE, type=YARD MOVE}]"><label class="label ng-binding">Type</label><label class="select"><div class="select2-container select2 multiSelect selectElement" id="s2id_moveTaskType" style="width: 100%;"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">   <span class="select2-chosen"></span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen15"></div><select ng-model="taskCreateForm.moveTaskType" id="moveTaskType" ng-options="moveTaskType.type as moveTaskType.name for moveTaskType in taskCreateForm" class="select2 multiSelect selectElement select2-offscreen" ng-click="calls()" tabindex="-1"><option value="?" selected="selected"></option></select></label></section>

我在浏览器控制台中运行此数据时获得了此数据：

[{name=PULL, type=PULL}, {name=SPOT, type=SPOT}, {name=PULL_SPOT, type=PULL SPOT}, {name=DOCKBUMP, type=DOCKBUMP}, {name=YARD_MOVE, type=YARD MOVE}]

Answer 1

在Groovy / Java中，当您打印字符串时，您将看不到字符串周围的双引号。当您将它传递给视图中的element指令时，就会发生这种情况。它不是作为JSON对象传递的，只是错误的格式化JSON（对于javascript）。

要解决此问题，只需将其解析为JSON，然后再将其传递给属性。因此，请修改您的GSP，如：

<ang-input:select dir-data="${new grails.converters.JSON(com.aa.fsight.MoveTaskRuleDef.MoveTaskType.class.getEnumConstants().collect{[name:it.name(), type: it.type]})}" ></ang-input:select>

我只在new grails.converters.JSON()构造函数中包含了你的值。另外，修改角度代码范围以使用=代替@：

scope : {
    dirData : '=',
},

现在尝试记录$scope.dirData，您应该获得正确的对象列表。

如何将grails json数据作为指令属性值传递给angularjs指令

1 个答案: