AngularJs通过指令ng-include来将页面中共用的模块分离出来，这个功能和mvc里面的分部页的作用一样的。

先看文件的结构：

父页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://cdn.staticfile.org/angular.js/1.7.5/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="ParentCtr">

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

    <input type="text" ng-model="test" />

    <p style="background-color:darkgoldenrod">这里演示在一个HTML页面中，通过引用子页面来完成整个页面功能</p>

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

        <script type="text/javascript">

            var formapp = angular.module('myApp', []);

            formapp.controller('ParentCtr', function ($scope) {

                $scope.test = "hello";

                $scope.$on('to-parent', function (d, data) {

                    $scope.$broadcast('to-child', data);

                });

            })

                .controller("headerCtr", function ($scope) {

                    $scope.headerTitle = "头部";

                    $scope.btnheader = function () {

                        $scope.headerTitle = "点击了按钮";

                    }

                    $scope.btnheader1 = function () {

                        $scope.$emit('to-parent', $scope.headerTitle);

                    }

                })

                .controller("footerCtr", function ($scope) {

                    $scope.ft = "尾部";

                    $scope.list = ["abc", "efg", "xyz"];

                    $scope.$on('to-child', function (d, data) {

                        $scope.fromHeader= data;

                    });

                });

        </script>

</body>

</html>

子页面Header.html：

<div ng-controller="headerCtr">

    <h2>这是头部</h2>

    <input ng-model="headerTitle" />

    <input type="button" ng-click="btnheader()" value="点击我" />

    <input type="button" ng-click="btnheader1()" value="点击我，将文本框的内容显示到尾部" />

</div>

子页面Footer.html：

<div ng-controller="footerCtr">

    <h2>这是尾部</h2>

    <p>{{ft}}</p>

    <p>{{fromHeader}}</p>

    <ul>

        <li ng-repeat="t in list">{{t}}</li>

    </ul>

</div>

运行效果：

在不同的控制器之间传值比较麻烦，同级的控制器之间不能相互传值，而是通过父级控制器来传值。具体步骤：

当点击头部的按钮的时候，通过 $scope.$emit('to-parent', $scope.headerTitle); 将要传递的数据传递到父级控制器，然后在父级控制器中，通过 $scope.$on('to-parent', function (d, data)来获取数据，然后在函数中调用  $scope.$broadcast('to-child', data);

将数据传递到子控制器，最后在子控制器中用$scope.$on('to-child', function (d, data) 来接收传来的数据。

如果想把js脚本单独放到js文件中，可以这样：但要注意的是，所有的js文件的引用都是在父级页面

AngularJs 的ng-include指令的使用的更多相关文章

  1. 浅谈JSP中include指令与include动作标识的区别

    JSP中主要包含三大指令,分别是page,include,taglib.本篇主要提及include指令. include指令使用格式:<%@ include file="文件的绝对路径 ...

  2. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  3. JSP(include指令与<jsp:include>动作的区别)

    <%@ page language= "java" contentType="text/html;charset=UTF-8" %><html ...

  4. jsp include指令

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  5. include指令和include标签的区别

    区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...

  6. 使用-MM生成include指令和依赖生成(make include directive and dependency generation with -MM)

    I want a build rule to be triggered by an include directive if the target of the include is out of d ...

  7. include动作标记和include指令标记学习笔记

    我的jsp学习参考书是耿祥义,张跃平编著的jsp大学使用教程这本书,我也向大家推荐这本书,我觉得这本书适合我的学习方式,知识的讲解透彻易懂. include指令标记                   ...

  8. Java学习-035-JavaWeb_004 -- JSP include 指令

    inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...

  9. 转: JSP中include指令和include动作的区别

    include指令是编译阶段的指令,即include所包含的文件的内容是编译的时候插入到JSP文件中,JSP引擎在判断JSP页面未被修改,否则视为已被修改.由于被包含的文件是在编译时才插入的,因此如果 ...

  10. include指令和<jsp:include>标准动作

    利用JSP的包含机制,可以有效的避免重复,把可重用的部分独立出去,使用include把它们包含到当前文件.JSP有两种包含机制:include指令和<jsp:include>标准动作. 1 ...

随机推荐

  1. Android Studio 经常使用手冊

    经常使用小操作 单词选择 显示近期操作 改动的文件 文件查找 操作记录 移动行 查找方法调用处 方法的跟进 显示方法的參数 行的高速操作 多行操作 高速补全完毕 代码提示 变量的高速操作 代码折叠 预 ...

  2. Hashmap在JDK8中的提升

    HashMap使用key的hashCode()和equals()方法来将值划分到不同的桶里. 桶的数量通常要比map中的记录的数量要稍大.这样 每一个桶包含的值会比較少(最好是一个).当通过key进行 ...

  3. Python中解决中文乱码问题

    乱码原因:因为你的文件声明为utf-8,并且也应该是用utf-8的编码保存的源文件.但是windows的本地默认编码是cp936,也就是gbk编码,所以在控制台直接打印utf-8的字符串当然是乱码了. ...

  4. Selenium系列之--01 简介【转】

    1.selenium 工具组件 1.1 selenium2,也称为selenium webdriver.webdriver原来是另一个自动化测试工具,后与selenium 合并了.webdriver直 ...

  5. python 【第三篇】函数基础

    深浅拷贝 set是一个无序且不重复的元素集合访问速度快天生解决重复问题 #!/usr/bin/env python3 # -*- coding:utf-8 -*- #深浅拷贝 import copy ...

  6. Linux的xshell命令

    1,Linux基本命令行的组成结构 2,Linux系统命令操作格式 命令 空格 参数 空格 需要处理的内容 rm   -rf   /tmp/* ls   -la   /home 一般情况下(参数)是可 ...

  7. visio 2010 修改 默认字体 字号大小 方法[整理]

    [转自]http://www.cnblogs.com/vegaliming/archive/2012/08/09/2630568.html 1.新建一个模具 2.将常用的图形放到这个模具中 3.对每个 ...

  8. 查源码分析 游标 写 需要 cursors 一切不看源码的代码引入都是定时炸弹的启动

    https://github.com/PyMySQL/PyMySQL/blob/master/pymysql/__init__.py 建立连接 def Connect(*args, **kwargs) ...

  9. StyleBook皮肤控件的使用

    StyleBook 介绍及VICEN对皮肤控件的一些看法可以说StyleBook的出现,简直是皮肤控件厂商的噩梦,因为用户可以通过StyleBook快速切换控件样式,而不需要在去购买第三方换肤控件,对 ...

  10. ip地址管理与子网划分

    1,高层协议(主机到主机或应用问题)负责名字到地址的映射.国际模块负责网际地址到局域网地址的映射.底层(如本地网或网关)程序的任务是负责本地网地址到路由上的映射. 2,地址是由4个八位字节组成(32位 ...