首页 > 代码库 > Angular(ng-include指令-嵌套)

Angular(ng-include指令-嵌套)

2024-09-28 03:11:40   214人阅读

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="http://www.mamicode.com/js/angular-1.3.0.js"></script>
<script src="http://www.mamicode.com/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指令-嵌套)


联系
我们