有没有办法让AngularJS与HTML一起工作？

发布时间：2020-12-17 07:24:03 所属栏目：安全来源：网络整理

导读：有没有办法从服务器获得具有预先填充值的 HTML视图,然后让AngularJS将这些值读入其$scope？我在想一个HTML是这样的场景： div ng-controller="TestController" div ng-bind="title"Test Title/div div ng-bind="itemCount"33/div div ng-repeat="item in it

有没有办法从服务器获得具有预先填充值的 HTML视图,然后让AngularJS将这些值读入其$scope？

我在想一个HTML是这样的场景：

<div ng-controller="TestController">
    <div ng-bind="title">Test Title</div>
    <div ng-bind="itemCount">33</div>
    <div ng-repeat="item in items">
        <div ng-bind="item.title">Item 1 Title</div>
    </div>
</div>
<button ng-click="update()">Update</button>

JavaScript就是这样的：

function TestController($scope) {
    $scope.update = function() {
        console.log($scope.title); // Should log "Test Title"
    };
}

这背后的想法是让服务器呈现搜索引擎可以索引的HTML,但是具有用于通过JS操纵的内容的JavaScript模型表示.

虽然ng-init是一种解决方案,但它要求您明确设置该值.所以这是一个替代解决方案.

http://plnkr.co/edit/pq8yR9zVOHFI6IRU3Pvn?p=preview

注意：此解决方案不适用于ng-repeat.控制流指令不能与此一起使用.但是,对于从ng-bind中简单提取信息,这非常有效.您需要做的就是将默认指令(plunk中的代码)添加到您执行绑定的任何位置,它将提取文本内容并将其推送到范围变量.

编辑(ng-repeat解决方案)：

所以,我在想一种让ng-repeat也以同样方式工作的方法.但是让ng-repeat像这样工作并不是一件容易的事(参见证明代码：P).我终于找到了解决方案 – 你走了：

http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview

在使用它之前,您需要了解一些事项.这还没有经过彻底的测试.它只适用于重复数组(而不是对象).可能存在未涵盖的案例.我正在压倒ngRepeat本身,这可能会产生其他后果.循环浏览项目时(在服务器端代码中)不要忘记在第一个元素上添加default =“true”,并在其余元素上添加默认值.

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!