javascript - angualrjs html经过$compile后,ng-model失效?
PHP中文网
PHP中文网 2017-04-11 10:04:10
[JavaScript讨论组]

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body  data-ng-app="MetronicApp" ng-controller="AppController" >
<p id="ttt">
</p>

<script src="https://code.angularjs.org/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var MetronicApp = angular.module("MetronicApp", [
    ]);
    MetronicApp.controller('AppController', ['$scope', '$rootScope', '$timeout', '$location', '$compile' , '$http', function ($scope, $rootScope, $timeout, $location,$compile,$http) {
        var As = $("#ttt");
        var viewHtml =`
            <input class="form-control" ng-model="cxremark"/>
            <input class="form-control" ng-model="data.cxremark"/>
            <button ng-click="testC()">ok</button>
        `;
        As.html(viewHtml);
        $compile(As.contents())($scope);

        $scope.data = {};
        $scope.cxremark = "";
        $scope.testC = function(){
            console.log($scope.cxremark);
            console.log($scope.data.cxremark);
        }

    }]);
</script>


</body>
</html>

问题是我改变两个输入框的值:

输出控制台

只有第一个有变化,第二个没有变化啊?为什嚒会出现这种问题呢?

PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
巴扎黑

$("#ttt").append($compile(angular.element(viewHtml))($scope));

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号