首页新闻找找看学习计划

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>

看注释 ..直接复制到本地

深蓝色梦想的主页 深蓝色梦想 | 初学一级 | 园豆:6
提问于:2015-09-01 10:48
< >
分享
所有回答(2)
0

你贴的代码是完全有效的,修改右边的表单值,左边的方块的样式会跟着变化。Chrome 44

幻天芒 | 园豆:36522 (高人七级) | 2015-09-01 11:07

请认真看注释

支持(0) 反对(0) 深蓝色梦想 | 园豆:6 (初学一级) | 2015-09-01 11:08
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";
橙子在上海 | 园豆:396 (菜鸟二级) | 2015-09-05 19:29

就是因为保存到后台一样,,然后读取出来 就变成style="width130px"  ,双向绑定就无效了

支持(0) 反对(0) 深蓝色梦想 | 园豆:6 (初学一级) | 2015-09-06 10:32

@深蓝色梦想: 

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;;
               
            });

 

支持(0) 反对(0) 橙子在上海 | 园豆:396 (菜鸟二级) | 2015-09-06 12:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册