Angular(ng-include指令-嵌套)

最新推荐文章于 2019-04-17 14:41:25 发布

dibisha5159

最新推荐文章于 2019-04-17 14:41:25 发布

阅读量184

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/YoogaChan/p/6920872.html

版权

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

转载于:https://www.cnblogs.com/YoogaChan/p/6920872.html

dibisha5159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular(ng-include指令-嵌套)

html部分.........................................................................................<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-...
复制链接

扫一扫