zoukankan      html  css  js  c++  java
  • 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"
    });


  • 相关阅读:
    团队冲刺第二天站立会议
    团队冲刺第一天站立会议
    Scrum仪式之Sprint计划会议
    软件需求分析
    我们的团队
    No.1_1 java语言基础_学习笔记
    java 基础学习
    LoadRunner 11 安装及破解
    Linux查看程序端口占用情况
    windows 下查看端口占用命令
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6920872.html
Copyright © 2011-2022 走看看