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

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 中，当您打印字符串时，您将看不到字符串周围的双引号。这就是当您将其传递给 View 中的元素指令时发生的情况。它不会作为 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() 构造函数中。另外，修改您的 Angular 代码范围以使用 = 而不是 @:

scope : {
    dirData : '=',
},

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