87,839
社区成员
发帖
与我相关
我的任务
分享angularjs谁帮我看看这个问题.后台读取 双重绑定就失效了.有什么办法?
看注释 ..直接复制到本地
<!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>
...全文
请发表友善的回复…
发表回复
