angularjs谁帮我看看这个问题.后台读取 双重绑定就失效了.有什么办法?
0
悬赏园豆：5
[待解决问题]
<!doctype html> <html ng-app="app"> <head> <title></title> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0/angular.min.js"></script> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> *{ margin: 0;padding:0; } #myform{ width:640px;height:500px;border: 1px solid red;position: relative; } .sidebar{ position: absolute;top:5px;right: 15px;width: 220px; } </style> </head> <body> <div ng-controller="myform"> <div id="myform"> </div> <div class="sidebar"> <div class="form-group"> <label>宽</label> <input type="text" class="form-control" ng-model="w" id=""> </div> <div class="form-group"> <label>高</label> <input type="text" class="form-control" ng-model="h" id=""> </div> <div class="form-group"> <label>X值</label> <input type="text" class="form-control" ng-model="x" id=""> </div> <div class="form-group"> <label>Y值</label> <input type="text" class="form-control" ng-model="y" id=""> </div> </div> </div> <script type="text/javascript"> var app = angular.module("app", function () {}); app.controller("myform",function($scope,$compile) { $scope.controllerName = "myform"; $scope.w = "130"; $scope.h = "130"; $scope.x = "130"; $scope.y = "130"; $("#myform").append($compile('<div class="box" style="width:{{w}}px;height:{{h}}px;position:absolute;top:{{y}}px;left:{{x}}px;background: red; "></div>')($scope)); }); /** angularjs生成的html代码要保存到后台的. 如果要把这些HTML代码从后台读取到前台的#myform里,右边的表单就没什么意义, 也就是说model绑定对这些HTML的style里的值失去控制.. 比如:把class="box"的div整个保存的后台.之后通过服务$http读取出来,右边的model绑定就失效了. 现在整个前端项目都完成了快90%,才发现读取后不能双重绑定,真是蛋疼. */ </script> </body> </html>
看注释 ..直接复制到本地
所有回答(2)
0
你贴的代码是完全有效的，修改右边的表单值，左边的方块的样式会跟着变化。Chrome 44
请认真看注释
0
1，AngularJS双向绑定是可以的
2，:把class="box"的div整个保存的后台 ，保存到DB的是 style="width:{{w}}px 还是 style="width130px ？
3，下面这一段是写定的 130，所以也没每次加载完毕后 显示的是 130的值
$scope.w = "130"; $scope.h = "130"; $scope.x = "130"; $scope.y = "130";
就是因为保存到后台一样,,然后读取出来 就变成style="width130px" ,双向绑定就无效了
@深蓝色梦想:
1，box直接写到 myform 里面
<div id="myform"> <div class="box" style="width:{{w}}px;height:{{h}}px;position:absolute;top:{{y}}px;left:{{x}}px;background: red; "></div> </div>
2，提交数据的时候抓取 需要的值 w h y...
3，$scope给值的时候，从数据读值后赋给 $scope 变量
app.controller("myform",function($scope,$compile) { $scope.controllerName = "myform"; $scope.w = entity.w; $scope.h = entity.w;; $scope.x = entity.w;; $scope.y = entity.w;; });
