首页新闻找找看学习计划

后台返回的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>
深蓝色梦想的主页 深蓝色梦想 | 初学一级 | 园豆:6
提问于:2015-09-09 13:37
< >
分享
所有回答(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>
不要相信我 | 园豆:56 (初学一级) | 2015-09-15 16:46
0

先不说你的需求,首先,angularjs是不需要有任何DOM操作的代码的,而且在angular中使用jquery也是非常错误的用法。

其次,angular是以数据为中心的mv*,可已理解为双向数据绑定。

一起走过的日子…… | 园豆:236 (菜鸟二级) | 2015-10-28 15:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册