AngularJS 一个 文件空可以存在多个ng-app吗，不能的话为什么
3 回答
米脂
TA贡献1836条经验 获得超3个赞
可以存在
看我的学习测试页：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!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('你的应用程序所在块'),['应用程序名']);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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> |
饮歌长啸
TA贡献1951条经验 获得超3个赞
$scope.all=function(){
var t=0;
for(var i=0;i<$scope.data.length;i++){
t+=$scope.data[i].m_num*$scope.data[i].m_price;
}
return t;
}
ITMISS
TA贡献1871条经验 获得超8个赞
可以的
但是AngularJs默认只加载一个ng-app，并且是第一个，比如：
<div ng-app>
<input ng-model="name" type="text" placeholder="请输入姓名">
<p>我的姓名： {{name}}</p>
</div>
<div ng-app>
<input ng-model="age" type="number" placeholder="请输入年龄">
<p>我的年龄: {{age}}</p>
</div>
或者即使是ng-app加了名字也一样：
<div ng-app>
<input ng-model="name" type="text" placeholder="请输入姓名">
<p>我的姓名： {{name}}</p>
</div>
<div ng-app>
<input ng-model="age" type="number" placeholder="请输入年龄">
<p>我的年龄: {{age}}</p>
</div>
- 3 回答
- 0 关注
- 570 浏览
添加回答
举报
0/150
提交
取消