Data binding 理解AngularJS中的双向数据绑定

我是安格拉斯的新手。很长一段时间以来，我一直试图以使用JQuery或Mootools等Javascript框架的方式滥用它。现在我明白它不会再像那样工作了。。。但我遇到了一些大问题，因为我总是用CMS生成HTML输出

所以它是相当静态的，当它第一次出现时。。。小例子：

<ul>
 <li>foo <span>delete</span></li>
 <li>bar <span>delete</span></li>
 <li>blub <span>delete</span></li>
</ul>

foo删除
删除条
blub删除

现在我想，双向数据绑定意味着我可以借助角度范围和控制器生成视图，但也可以通过视图生成模型

我可能有点困惑。。。这是我的问题。是否有任何方法可以从CMS的静态HTML输出启动模型

我试过这样的东西

<ul ng-controller="Ctrl">
 <li ng-init="item[0].name=foo">{{item[0].name}} <span ng-click="remove(0)">delete</span></li>
 <li ng-init="item[1].name=bar">{{item[1].name}} <span ng-click="remove(1)">delete</span></li>
 <li ng-init="item[2].name=blub">{{item[2].name}} <span ng-click="remove(2)">delete</span></li>
</ul>

{{{item[0].name}删除
{{{item[1].name}删除
{{{item[2].name}删除

在我的控制器中，我编写了一个删除函数。但当它删除时，它只删除了名称。。。span按钮仍然在那里

但当我将数据定义为javascript数组并通过Angular with ng repeat完成整个输出时，它确实起到了作用。。。像这样：

<ul ng-repeat="it in item">
 <li>{{it.name}} <span ng-click="remove($index)">delete</span></li>
</ul>

{{it.name}}删除

---

我希望我在这里说了一点，大家都明白我的困难和问题是什么？有人能告诉我我在那里尝试的东西是否可能吗？

这是人们在适应Angular和其他类似框架时经常遇到的问题

您不再需要服务器为您呈现HTML。您所需要做的就是设置模板，并将适当的数据加载到范围中

<ul ng-controller="Ctrl" ng-init="getMyItems()">
 <li ng-repeat="item in items">{{item.name}} <a ng-click="remove($index)">delete</a></li>
</ul>

---

现在我知道你可能在想“但我不想单独请求获取我的JSON。这很好（可能不相关，但很好）…您所需要做的就是将其粘贴到一个全局变量中，并使用$window检索它。

让我们来讨论代码。这是一个实时应用程序，它显示绑定到MySQL数据的配置文件图片。当MySQL（模型）视图（HTML）中发生任何更改时，都将进行更新

app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};

这里是HTML

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
      <div class="row" ng-repeat="data in profile_pictures">
        <div class=".col-sm-6 .col-md-5 .col-lg-6">
          <h4>User Say's</h4><hr>
          <p>
            This is a Demo feed. It is developed to demonstrate Two way data binding.
          </p>
          <img src="{{data.profile_picture}}">
        </div>
      </div>
    </div>

用户说的


这是一个演示提要。它是为了演示双向数据绑定而开发的。

了解更多信息：

希望有帮助

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
      <div class="row" ng-repeat="data in profile_pictures">
        <div class=".col-sm-6 .col-md-5 .col-lg-6">
          <h4>User Say's</h4><hr>
          <p>
            This is a Demo feed. It is developed to demonstrate Two way data binding.
          </p>
          <img src="{{data.profile_picture}}">
        </div>
      </div>
    </div>