Angular(ng-include指令-嵌套)
阿新 • • 發佈：2017-05-30
div scope ctrl erl utf-8 外部 head .... -c
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"
});
Angular(ng-include指令-嵌套)