Angular(ng-include指令-嵌套)


html部分

.........................................................................................

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-include指令</title>
<style>
.large{
background-color: blue; color: white;
text-align: center;
font: bold 50px/80px verdana, serif;
border: 6px black ridge; }
.small{
background-color: lightgrey;
text-align: center;
border: 1px black solid; }
a{
color: blue; text-decoration: underline;
cursor: pointer; }
</style>

</head>
<body>
<div ng-controller="MyCtrl">
[<a ng-click="titleBar='large.html'">使用大标题</a>]
[<a ng-click="titleBar='small.html'">使用小标题</a>] <!--titleBar 标题栏-->
<div ng-include="titleBar"></div> <!--ng-include 指令用于包含外部的 HTML 文件-->
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/t8.js"></script>
</html>

........................................................................................
js部分
var myApp=angular.module('myApp',[]);
myApp.controller('MyCtrl',function ($scope) {
$scope.titleBar="small.html"
$scope.titleBar="large.html"
});



免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM