Angular在一个页面中使用两个ng-app的方法

 更新时间:2017年02月20日 15:22:42   作者:python基础教程  
这篇文章主要介绍了Angular在一个页面中使用两个ng-app的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>
 </head>
 <body>
  <input type="button" ng-app="myApp1" ng-controller="App1Controller" ng-click="do1()" value="按钮1" />
  <input type="button" ng-app="myApp2" ng-controller="App2Controller" ng-click="do2()" value="按钮2">
  <script src="bower_components/angular/angular.js"></script>
  <script>
  /**
  * myApp1 Module
  *
  * Description
  */
  var myApp1 = angular.module('myApp1', []);
  myApp1.controller('App1Controller', ['$scope', function($scope){
   $scope.do1 = function(){
    console.log(11111);
   };
  }]);
  var myApp2 = angular.module('myApp2', []);
  myApp2.controller('App2Controller', ['$scope', function($scope){
   $scope.do2 = function(){
    console.log(22222);
   };
  }]);
  //手动的让第二个div被myapp2管理
  angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
  </script>
 </body>
</html>

这种方法不推荐,请参考下篇文章。下面给大家介绍angular在一个页面中使用两个ng-app的方法(二)。敬请关注!

相关文章

  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    AngularJS 是一个 JavaScript 框架,它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下
    2016-08-08
  • angular中子控制器向父控制器传值的实例

    angular中子控制器向父控制器传值的实例

    今天小编就为大家分享一篇angular中子控制器向父控制器传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 实现JavaScript 动画效果详解

    本文主要介绍AngularJS 实现 JavaScript 动画的资料,这里整理了详细的资料和简单示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angular 1.x个人使用的经验小结

    Angular 1.x个人使用的经验小结

    这篇文章主要给大家介绍了关于Angular 1.x个人使用的一些经验,属于一些基础入门教程,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 简单谈谈关于Angular Cli打包的事

    简单谈谈关于Angular Cli打包的事

    使用过angular2人都应该知道,angular2提供的Angular CLI来快速搭建,快速生成serives、component、derective、modulet各种模板...下面这篇文章主要给大家介绍了关于Angular Cli打包的一些事,需要的朋友可以参考下。
    2017-09-09
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    这篇文章主要介绍了AngularJS实现的获取焦点及失去焦点时的表单验证功能,涉及AngularJS使用ng-blur、ng-focus针对表单事件监听相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • AngularJS包括详解及示例代码

    AngularJS包括详解及示例代码

    本文主要介绍AngularJS包括的基础知识,这里整理了相关资料并附示例代码和实现效果图,有需要的小伙伴可以参考下
    2016-08-08
  • SpringMVC简单整合Angular2的示例

    SpringMVC简单整合Angular2的示例

    这篇文章主要介绍了SpringMVC简单整合Angular2的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS 与百度地图的结合实例

    AngularJS 与百度地图的结合实例

    这篇文章主要介绍了AngularJS 与百度地图的结合实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • AngularJS使用指令增强标准表单元素功能

    AngularJS使用指令增强标准表单元素功能

    这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能,包括数据绑定、建立模型属性、验证表单等,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论