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"
});


posted @ 2017-05-30 17:28  YoogaChan  阅读(2711)  评论(0编辑  收藏  举报