angularJS1 ng-include相同html部分重用

最新推荐文章于 2018-12-10 18:36:28 发布

xiejunna

最新推荐文章于 2018-12-10 18:36:28 发布

阅读量2.3k

点赞数

分类专栏： angularJS1 文章标签： angularjs

本文链接：https://blog.csdn.net/xiejunna/article/details/53746833

版权

angularJS1 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

angularJS1 ng-include指令相同html部分重用：
例如a.html中有一个共用的button，在b.html中也要用到，这时候，就用到了ng-include指令。
demo如下：

a.html

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <script type="text/javascript" src="js/angular.min-1.6.x.js"></script>
        <style>
            .container{width: 100%;height: auto;}
            .div_other{
                width: 100%;height: 300px;
                background-color: aliceblue;
                text-align: center;line-height: 300px;
            }
            .div_public{
                width: 90%;height: 100px;
                margin: 5%;background-color: aquamarine;
                border-radius: 5px;
            }
            .btn{
                width: 90%;height: 40px;
                margin: 5%;background-color: cornflowerblue;
                border-radius: 5px;
            }
        </style>
    </head>

    <body ng-app='myapp1' >

        <div class="container">

            <div class="div_other">一些其他的内容</div>

            <!--
                这一部分共用的部分放入一个单独的html文件中

                <div class="div_public">
                <p>假如：这是共用的html部分</p>
                <input type="button" class="btn" value="下一步"/>
            </div>

            -->

            <div ng-include="'btnpublic.html'"></div>

        </div>

    </body>

   <script type="text/javascript"  >
     var app = angular.module('myapp1', []);

   </script>
</html>

共用的html如下：
btnpublic.html
（这个不用在a.html中引入，直接在a.html中用

）
注意： 双引号中的单引号不能少。

<div class="div_public">
    <p>假如：这是共用的html部分</p>
    <input type="button" class="btn" value="下一步"/>
</div>

xiejunna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS1 ng-include相同html部分重用

angularJS1 ng-include指令相同html部分重用：例如a.html中有一个共用的button，在b.html中也要用到，这时候，就用到了ng-include指令。 demo如下：a.html<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
复制链接

扫一扫