渲染 JSP 页面后设置 ng-model

【问题标题】：Set ng-model after rendering JSP page渲染 JSP 页面后设置 ng-model
【发布时间】：2013-09-20 21:00:16
【问题描述】：

我在一个项目中使用 AngularJS、Spring MVC 和 JSP。我需要做这种事情：

<div class="hide" ng-app ng-controller="myCtrl">
    <span ng-model="myValue">${valueToRender}</span>
</div>

渲染后，假设我得到了这个 HTML：

<div class="hide" ng-app ng-controller="myCtrl">
    <span ng-model="myValue">42</span>
</div>

我想在 Angular 控制器中访问 myValue 的值，但浏览器显示 myValue 未定义。

这里是javascript：

function myCtrl($scope) {
    console.info($scope.myValue); //Browser tells me that is undefined
}

感谢您的帮助。

【问题讨论】：

标签： java javascript spring jsp angularjs

【解决方案1】：

ng-model 不适用于此，此外它仅适用于输入元素（不适用于<span>s）。我建议使用指令：

目标标记：

<div class="hide" ng-app ng-controller="myCtrl">
    <span server-data="myValue">${valueToRender}</span>
</div>

指令：

angular.module("...").directive("serverData", function() {
    return {
        scope: false,
        link: function(scope, element, attrs) {
            scope[attrs.serverData] = element.text();
        }
    };
});

这个带有上述 HTML 模板的指令会将值 "42"（字符串）放在名称 myValue 下的范围内。（此代码未经测试只是为了演示一般概念。）

但是，你确定这是实现客户端-服务器通信的方式吗？

【讨论】：