AngularJS 一个 文件空可以存在多个ng-app吗，不能的话为什么
2个回答
展开全部
可以存在
看我的学习测试页：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="
<script src="
</head>
<body>
<!--ng-app初始化一个AngularJS应用程序，指定应用程序名称-->
<!--ng-init初始化应用程序数据-->
<!--ng-model把元素值指定到应用程序-->
<div data-ng-app="" data-ng-init="firstName='John'">
<p>请在输入框中尝试输入：</p>
<p>姓名：<input type="text" data-ng-model="firstName"/></p>
<p>您输入的为：{{firstName}}</p>
</div>
<hr/>
<div id="appsum" data-ng-app="appsum" data-ng-init="quantity=5;price=1.2">
<h2>价格计算器：</h2>
数量：<input type="text" data-ng-model="quantity"/>
价格：<input type="text" data-ng-model="price"/>
<p><b>总价：</b>{{quantity*price}}</p>
</div>
<hr/>
<!--ng-repeat会重复一个HTML元素-->
<div id="apprepeat" data-ng-app="apprepeat" data-ng-init="names=['John','Smith','David']">
<p>使用ng-repeat来重复元素</p>
<ul>
<li data-ng-repeat="x in names">{{'当前是'+x+'先生值班'}}</li>
</ul>
</div>
<hr/>
<!--ng-model指令可以：-->
<!--ng-model指令可以为应用程序提供类型验证（number,email,required）-->
<!--ng-model指令可以为应用程序数据提供状态（invalid,dirty,touched,error）-->
<!--ng-model指令可以为HTML元素提供CSS类-->
<!--ng-model指令可以绑定HTML元素到HTML表单-->
<!--创建自定义指令-->
<div id="appauto" data-ng-app="appauto" data-ng-controller="Ctrl">
<!--标签-->
<app-auto></app-auto>
<!--属性-->
<div app-auto></div>
<!--类名-->
<div class="app-auto"></div>
<!--注释-->
<!-- directive：app-auto -->
<span id="mySpan" data-ng-click="spanClick()">测试</span>
</div>
</body>
</html>
如上，存在多个ng-app，页面会自动加载第一个ng-app，后边的那几个需要手动加载，方法就是在下面js中调用angular.bootstrap(document.getElementById('你的应用程序所在块'),['应用程序名']);
<script>
var appsum=angular.module('appsum',[]);
angular.bootstrap(document.getElementById('appsum'),['appsum']);
var apprepeat=angular.module('apprepeat',[]);
angular.bootstrap(document.getElementById('apprepeat'),['apprepeat']);
var appauto=angular.module('appauto',[]);
appauto.directive('appAuto',function(){
return {
// restrict限制使用：
// A属性E元素C类名M注释，默认EA
restrict:'M',
template:'<h1>自定义指令创建</h1>'
};
});
appauto.controller('Ctrl',function($scope){
$scope.spanClick=function(){
$('#mySpan').hasClass('spanClickStyle')?$('#mySpan').removeClass('spanClickStyle'):$('#mySpan').addClass('spanClickStyle');
}
})
angular.bootstrap(document.getElementById('appauto'),['appauto']);
</script>
<style>
.spanClickStyle{
color: white;
background-color: red;
}
</style>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
Storm代理
2023-08-29 广告
"StormProxies是全球大数据IP资源服务商，其住宅代理网络由真实的家庭住宅IP组成，可为企业或个人提供满足各种场景的代理产品。点击免费测试（注册即送1G流量）StormProxies有哪些优势？1、IP+端口提取形式，不限带宽，I...
点击进入详情页
本回答由Storm代理提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
