猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

AngularJS 一个 文件空可以存在多个ng-app吗，不能的话为什么

AngularJS 一个 文件空可以存在多个ng-app吗，不能的话为什么


一只甜甜圈
浏览 571回答 3
3回答

米脂

可以存在看我的学习测试页：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<!DOCTYPE&nbsp;html><html><head&nbsp;lang="en">&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;&nbsp;<title></title>&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="&nbsp;</head><body>&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-app初始化一个AngularJS应用程序，指定应用程序名称-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-init初始化应用程序数据-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model把元素值指定到应用程序-->&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;data-ng-app=""&nbsp;data-ng-init="firstName='John'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>请在输入框中尝试输入：</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>姓名：<input&nbsp;type="text"&nbsp;data-ng-model="firstName"/></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>您输入的为：{{firstName}}</p>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<hr/>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="appsum"&nbsp;data-ng-app="appsum"&nbsp;data-ng-init="quantity=5;price=1.2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h2>价格计算器：</h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量：<input&nbsp;type="text"&nbsp;data-ng-model="quantity"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格：<input&nbsp;type="text"&nbsp;data-ng-model="price"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p><b>总价：</b>{{quantity*price}}</p>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<hr/>&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-repeat会重复一个HTML元素-->&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="apprepeat"&nbsp;data-ng-app="apprepeat"&nbsp;data-ng-init="names=['John','Smith','David']">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>使用ng-repeat来重复元素</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;data-ng-repeat="x&nbsp;in&nbsp;names">{{'当前是'+x+'先生值班'}}</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<hr/>&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model指令可以：-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model指令可以为应用程序提供类型验证（number,email,required）-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model指令可以为应用程序数据提供状态（invalid,dirty,touched,error）-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model指令可以为HTML元素提供CSS类-->&nbsp;&nbsp;&nbsp;&nbsp;<!--ng-model指令可以绑定HTML元素到HTML表单-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--创建自定义指令-->&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="appauto"&nbsp;data-ng-app="appauto"&nbsp;data-ng-controller="Ctrl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--标签-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<app-auto></app-auto>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--属性-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;app-auto></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--类名-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="app-auto"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--注释-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;directive：app-auto&nbsp;-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="mySpan"&nbsp;data-ng-click="spanClick()">测试</span>&nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>&nbsp;如上，存在多个ng-app，页面会自动加载第一个ng-app，后边的那几个需要手动加载，方法就是在下面js中调用angular.bootstrap(document.getElementById('你的应用程序所在块'),['应用程序名']);123456789101112131415161718192021222324252627<script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;appsum=angular.module('appsum',[]);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angular.bootstrap(document.getElementById('appsum'),['appsum']);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;apprepeat=angular.module('apprepeat',[]);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angular.bootstrap(document.getElementById('apprepeat'),['apprepeat']);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;appauto=angular.module('appauto',[]);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appauto.directive('appAuto',function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict限制使用：//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A属性E元素C类名M注释，默认EA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:'M',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template:'<h1>自定义指令创建</h1>'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appauto.controller('Ctrl',function($scope){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.spanClick=function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#mySpan').hasClass('spanClickStyle')?$('#mySpan').removeClass('spanClickStyle'):$('#mySpan').addClass('spanClickStyle');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angular.bootstrap(document.getElementById('appauto'),['appauto']);&nbsp;&nbsp;&nbsp;&nbsp;</script>&nbsp;&nbsp;&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.spanClickStyle{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;white;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style>&nbsp;
0

饮歌长啸

$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;}
0

ITMISS

可以的但是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>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

AngularJS