后台返回的html代码怎么用angular控制?
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; } .box{ background: red;width:100px;height:100px; } </style> </head> <body> <div id="myform" ng-controller="myform"> <div app-page id="page"> <div class="box">box</div> </div> <p>x:</p> <input type="text" ng-model="x" /> <p>y:</p> <input type="text" ng-model="y" /> </div> <script type="text/javascript"> var app = angular.module("app", function () {}); app.controller("myform",function($scope,$compile,$timeout) { $scope.x = "140"; $scope.y = "140"; $timeout(function(){ $("#page").remove(); var html = '<div app-page id="page" style="position:absolute;left:150px;top:150px" data-x="150" data-x="150"><div class="box">box</div></div>'; $("#myform").append($compile(html)($scope)); },6000); }); app.directive("appPage", function () { return { restrict: "A", replace: true, template: '<div style="position:absolute;left:{{x}}px;top:{{y}}px" data-x="{{x}}" data-x="{{y}}"><div class="box">box</div></div>', link : function(){ } } }); /** * 怎么控制后台读取的数据的scope啊?left,top都是scope绑定的,然后保存到后台的..之后会读取来前台,html的left和top就没有scope了 * 这样就控制不了left,top, * 这里假如$timeout就是从后台读取出来,然后调用了directive指令.正常来说scope.x和scope.y的值应该是150才对. * 但是样式跟data属性都被重复叠加了.正常来说应该是覆盖样式跟属性值才对 * 其实就是从后台返回出来的html怎么让它还保留scope.x.scope.y .并且不是重复叠加的 */ </script> </body> </html>
所有回答(2)
0
<!doctype html> <html ng-app="app"> <head> <title></title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script src="framework/jquery-1.10.2.min.js"></script> <style> *{ margin: 0;padding:0; } .box{ background: red;width:100px;height:100px; } </style> </head> <body> <div id="myform" ng-controller="myform"> <div app-page id="page"> <div class="box">box</div> </div> <p>x:</p> <input type="text" ng-model="x" /> <p>y:</p> <input type="text" ng-model="y" /> </div> <script type="text/javascript"> var app = angular.module("app", function () {}); app.controller("myform",function($scope,$compile,$timeout) { $scope.x = "10"; $scope.y = "10"; $timeout(function(){ $("#page").remove(); $scope.x = 30; var html = '<div app-page id="page" style="position:absolute;left:{{x}};top:{{y}}" cX="150" cY="150"><div class="box">box</div></div>'; $("#myform").append($compile(html)($scope)); console.log("timeout"); },2000); }); app.directive("appPage", function () { return { restrict: "A", scope: { x: "=cX", y: "=cY" }, replace: true, template: '<div style="position:absolute;left:{{x}}px;top:{{y}}px" cx="{{x}}" cy="{{y}}"><div class="box">box</div></div>', link : function(){ } } }); /** * 怎么控制后台读取的数据的scope啊?left,top都是scope绑定的,然后保存到后台的..之后会读取来前台,html的left和top就没有scope了 * 这样就控制不了left,top, * 这里假如$timeout就是从后台读取出来,然后调用了directive指令.正常来说scope.x和scope.y的值应该是150才对. * 但是样式跟data属性都被重复叠加了.正常来说应该是覆盖样式跟属性值才对 * 其实就是从后台返回出来的html怎么让它还保留scope.x.scope.y .并且不是重复叠加的 */ </script> </body> </html>
0
先不说你的需求，首先，angularjs是不需要有任何DOM操作的代码的，而且在angular中使用jquery也是非常错误的用法。
其次，angular是以数据为中心的mv*，可已理解为双向数据绑定。
