zoukankan      html  css  js  c++  java
  • 关于 ng-include 在一个页面中加载另一个页面的路径问题

    程序的结构图

    index.html

    <!DOCTYPE html>
    <html ng-app="bookStoreApp">
    <head lang="en">
        <meta charset="UTF-8">
        <title>BookStore</title>
        <script src="framework/angular.js"></script>
        <script src="framework/angular-route.js"></script>
        <script src="js/app.js"></script><!-- 必须先加载bookList-ctrl.js和hello-ctrl.js然后再加载app.js -->
    </head>
    <body ng-controller="firstController">
        {{name}}
        <div ng-show="cat">
            <div ng-include src="'tpls/cat.html'" ></div>
        </div>
        <div>
            <button ng-click="showCat()">显示猫咪</button>
        </div>
    </body>
    </html>

    index.html 对应的app.js

    var bookStoreApp = angular.module('bookStoreApp',['ngRoute']);
    
    bookStoreApp.controller('firstController',function($scope){
       $scope.name = 'ms';
        $scope.cat = false;
        $scope.showCat = function(){
            $scope.cat = !$scope.cat;
        }
    });

    cat.html

    <img src="picture/cat.jpg">

      由上图的结构可以看出index.html中ng-include 包含的路径cat.html 是相对于index.html这个路径的相对路径 但是有没有发现cat.html中的图片的路径是怎么写的??是相对于index.html 的相对路径,可以这样理解A页面包含B页面 B页面中的包含的一些东西的路径要写成相对于A的路径的相对路径。如果单独加载B页面当然B页面中的东西要写成相对于B页面中的相对路径。

  • 相关阅读:
    海量数据挖掘--DB优化篇
    BabyLinux制作过程详解
    C语言中的位域、字节序、比特序、大小端
    使用Busybox制作CRAMFS文件系统成功
    使用BusyBox制作linux根文件系统(CramFS+mdev)
    常用 U-boot命令详解
    基本C库函数
    simple_strtoul()
    在u-boot中添加命令
    U-Boot添加menu命令的方法及U-Boot命令执行过程
  • 原文地址:https://www.cnblogs.com/ms-grf/p/6834575.html
Copyright © 2011-2022 走看看