我想向我当前的网站添加一个 div。
我想要添加的 div 应该使用 angularjs 显示一些 json 数据。
我的问题是，在页面渲染后添加 html 时，AngularJS 看起来并不像想象的那样工作。
这是我的测试:
<html >
<head>
<meta charset="utf-8">
<title>Angular test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<script>
var featureInfoMainDivId = 'FeatureInfoMaster';
function initAngularDataFeatureInfo() {
var s = document.createElement('script');
s.type = "text/javascript";
s.textContent =
'var app = angular.module("featureInfoApp", []); ' +
'app.controller("featureInfoCtrl", function ($scope) { ' +
'$scope.firstName = "John" '+
'$scope.lastName = "Doe" ' +
'});';
document.getElementById(featureInfoMainDivId).appendChild(s);
}
function addFeatureInfoDiv() {
var divMain = document.createElement('div');
divMain.setAttribute('id', featureInfoMainDivId);
divMain.setAttribute('ng-app', "featureInfoApp");
divMain.setAttribute('ng-controller', "featureInfoCtrl");
divMain.innerHTML ='<div> {{ firstName + " " + lastName }}</div>';
document.getElementById('appdiv').appendChild(divMain);
initAngularDataFeatureInfo();
}
</script>
<body >
<div id="appdiv"></div>
<button id="btn_load_grid" onclick="addFeatureInfoDiv();">loaddata</button>
</body>
</html>
最佳答案
您缺少两个分号
$scope.firstName = "John";
$scope.lastName = "Doe";
如果您加载 Angular 脚本，它会查找 ng-app 并引导自身。由于您在加载脚本后添加了 Angular 特定代码，因此您需要使用以下命令手动引导 Angular:
//after initAngularDataFeatureInfo();
angular.element(document).ready(function() {
angular.bootstrap(document, ['featureInfoApp']);
});
请删除此行:
divMain.setAttribute('ng-app', "featureInfoApp");
如果您手动引导 Angular，则不需要。有关更多引导信息，请参阅:Angular bootstrapping documentation .
另外:您使用 Angular 1.2.26 版本有什么原因吗？版本 1.5.3 是最新的稳定版本。
关于javascript - 使用javascript添加div，使用angularjs来显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36573269/