Question

我在javascript模板（EJS）中渲染动态内容。之后，我通过socket.io接收部分内容进行更新。我想知道是否有一种正确的方法可以在不使用某种$ eval或$ parse函数的情况下执行此操作。

以下是呈现模板的代码：

var data = [
    "0":{
        "id": "0",
        "title": "Data 0",
        "name": "Name of Data 0",
        "description": "Desc of Data 0"
    },
    "1":{
        "id": "1",
        "title": "Data 1",
        "name": "Name of Data 1",
        "description": "Desc of Data 1"
    },
    "2":{
        "id": "2",
        "title": "Data 2",
        "name": "Name of Data 2",
        "description": "Desc of Data 2"
    }   
];

<% for(var i=0; i < data.length; i++) {%>
    <div class="wrapper">   
        <h1><%=data[i].title%></h1>
        <p><%=data[i].name%></p>
        <p><%=data[i].description%></p>
    </div>
<% } %>

现在，我的socket.io应用程序将向此页面发送一个包含新内容的数据;例如

"1":{
    "id": "1",
    "title": "New Data 1",
    "name": "New Name of Data 1",
    "description": "New Desc of Data 1"
},

如何以角度更新正确的DOM节点？如果需要，我需要在socket.io发送的数据中进行哪些更改？

我曾经开始使用这种代码，但这看起来非常难看：

<script>
<% for(var i=0; i < data.length; i++) {%>
    $scope.Data_<%=data[i].id%>_title = "<%=data[i].title%>";
    $scope.Data_<%=data[i].id%>_name = "<%=data[i].name%>";
    $scope.Data_<%=data[i].id%>_desc = "<%=data[i].description%>";
<% } %>
</script>

HTML：

<% for(var i=0; i < data.length; i++) {%>
    <div class="wrapper">   
        <h1>{{Data_<%=data[i].id%>_title}}</h1>
        <p>{{Data_<%=data[i].id%>_name}}</p>
        <p>{{Data_<%=data[i].id%>_description}}</p>
    </div>
<% } %>

Answer 1

好的，正如我在上面的评论中提到的，我相信您只需要使用AngularJS $scope的{{3}}方法，该方法通过{{1}触发Angular模板中的绑定更新循环。当使用Angular进行HTTP服务调用或内置Angular指令来处理用户输入时，这通常会自动发生。但是，如果您使用socket.io进行数据更新，则需要告诉Angular何时使用$digest（或$apply() ...阅读文档中的差异来触发更新）。

此处$apply()显示$digest()如何用于更新您的数据。

注意：上面的示例数据实际上不是有效的javascript数组。在示例中，我将如何使用几乎相同的javascript 对象作为数据源。

AngularJS更新动态内容/范围

1 个答案: