AngularJS 和嵌入式框架 html

AngularJS and embedded framework html

本文关键字：html 框架 嵌入式 AngularJS      更新时间：2023-09-26

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

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

顺便说一下，我的工作基于此示例#3：http://code.angularjs.org/1.0.0rc12/docs-1.0.0rc12/guide/forms

我的问题与页面的默认值有关。由于模型在Javascript中被定义为对象。在上面的链接中，可以在$scope.master= {};中设置默认值，除了我使用框架生成静态页面而不是从我的服务器检索 json 对象之外，它工作正常。我的页面都是用嵌入式 scala 编写的，所以我在服务器端访问值。将检索到的信息从服务器端获取并变成客户端 JavaScript 可以访问的对象的最佳方法是什么？

你有几个选择。 我这样做的方法是将初始状态（通过WebSocket或其他东西）作为JSON推送到Angular，或者让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 和Dapper-Dot-Net。我使用以下技术将我的数据放到页面上，然后进入 Angular 范围。它应该可以转移到您的环境中。

  1. 在服务器端的页面中定义一个 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

  2. 在客户端，我将脚本标记放在页面的头部，并将 DtoJson 注入其中以使其进入全局范围

    <script>var dto=<%=DtoJson%>;</script>

  3. 在我的页面底部，我有一个脚本src="pageName.js"，这是我的Angular控制器文件。在控制器内部我说

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

  4. 现在，在服务器端创建的 json 在我的控制器范围内，我可以将数据绑定到 {{dto。User.FIRST_NAME}} 和 {{dto.Projects[0].ID}} ng-repeat="for p in dto.项目"等

我希望这是有道理的。

彼得

相关文章：