Javascript AngularJS和嵌入式框架html

我正在开发一个用户首选项页面，我决定使用AngularJS来控制数据的状态

我想实现的是一个页面，显示当前用户的设置，并允许用户编辑它们、取消更改或保存并提交更改（如果他们愿意）。我已经将我的标签和输入控件绑定到模型中，这样当用户修改他们的电子邮件地址时，它就会正确地反映出来

我的工作基于这个例子#3顺便说一下：

---

我的问题与页面的默认值有关。因为模型在Javascript中定义为对象。在上面的链接中，可以在这里的

$scope.master={}中设置默认值

除了使用框架生成静态页面，而不是从服务器检索json对象之外，它工作得很好。我的页面都是用嵌入式scala编写的，所以我访问服务器端的值。将服务器端检索到的信息转换为客户端javascript可以访问的对象的最佳方式是什么？

您有一些选择。我的方法是将初始状态（通过WebSocket或其他方式）推送到Angular作为JSON，或者让Angular通过HTTP调用将其从服务器中拉出来

您也可以使用ng init标记呈现页面以设置初始状态，但这种方式对我来说似乎很奇怪

<div ng-controller="FormController" ng-init="formData = {}">
  <form>
     <input ng-model="formData.input1" ng-init="formData.input1 = 'initialValue'>
  </form>
</div>

我正在使用ASP.NET和简洁的.NET。我使用以下技术将数据放到页面上，然后进入角度范围。它应该可以很好地转移到您的环境中

在服务器端的页面中定义DataTransferObject类和名为DtoJson的公共字符串，以保存类实例的序列化版本

private class DataTransferObject{
  public User User;
  public List<Project> Projects
}

public string DtoJson;

var dto=new DataTransferObject();
var userName="however you get a username";
dto.User=User.Get(userName);  // I already have a User class
var sql="select * from projects where user_name=:UserName";
var p=new DynamicParameters();
p.Add(":UserId", dto.User.ID);
dto.Projects=Project.Query<Project>(sql, p);  // returns a list of Project

// I use json.net to convert the Dto to json and expose it as a public variable
var DtoJson=Json.Convert(dto);  // approximate syntax but you get the idea


现在，在服务器端创建的json在我的控制器的作用域中，我可以将数据绑定到{{dto.User.FIRST_NAME}}和{{dto.Projects[0].ID}}ng repeat=“for p in dto.Projects”等

我希望这是有道理的

彼得
ng init对我来说应该很好。最终，我会将所有内容转移到使用AJAX，并通过单独的HTTP调用检索数据；我们的日程排得很紧，不想把事情复杂化。：）我不确定AngularJS文档是否建议不要使用ng init：他们没有提供理由，但建议只在示例应用程序中使用，而不要在生产中使用。感谢Peter的评论。解释完全有道理，这是我考虑的方法之一。angular文档提到不建议在生产应用程序中使用上述ng init解决方案，但没有说明原因。对我来说，您的解决方案看起来是一种同样有效的方法，尽管创建内联变量是我想要避免的事情（主要是出于样式目的）。类似的东西应该很容易在Scala/Play环境中实现。我同意内联变量有点难看。也许更好的方法是创建一个服务并将其注入控制器。
<script>var dto=<%=DtoJson%>;</script>

$scope.dto=dto;
console.log($scope.dto);