同一文件中的多个应用程序和控制器 [英] Multiple apps and controllers in the same file

查看：24
本文介绍了同一文件中的多个应用程序和控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这个 AngularJS 代码中:

<头><script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script><脚本>var app1 = angular.module('app1', []);app1.controller('Ctrl1', function ($scope){$scope.name = "杰克";});var app2 = angular.module('app2', []);app2.controller('Ctrl2', function ($scope){$scope.name = "史蒂夫";});<title>测试控制器</title><身体><div ng-app="app1"><div ng-controller="Ctrl1"><span>{{name}}</span>

<div ng-app="app2"><div ng-controller="Ctrl2"><span>{{name}}</span>

</html>

我有两个 ng-app 和两个控制器.但只有第一个似乎有效.显示了杰克的名字，但没有显示史蒂夫.为什么?

解决方案

显示问题的 JSFiddle 在这里:http://jsfiddle.net/DEnB2/

ng-app 指令的自动初始化仅发生一次，但您可以使用引导方法手动初始化其他模块.(参见:https://docs.angularjs.org/guide/bootstrap)

解决方案的 JSFiddle 在这里:http://jsfiddle.net/DEnB2/5/

<头><script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script><脚本>var app1 = angular.module('app1', []);app1.controller('Ctrl1', function ($scope){$scope.name = "杰克";});var app2 = angular.module('app2', []);app2.controller('Ctrl2', function ($scope){$scope.name = "史蒂夫";});angular.element(document).ready(function() {angular.bootstrap(document.getElementById('app2'), ['app2']);});<title>测试控制器</title><身体><div ng-app="app1"><div ng-controller="Ctrl1"><span>{{name}}</span>

<div id="app2"><div ng-controller="Ctrl2"><span>{{name}}</span>

</html>

In this AngularJS code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
  <script>
    var app1 = angular.module('app1', []);

    app1.controller('Ctrl1', function ($scope)
    {
      $scope.name = "Jack";
    });

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

    app2.controller('Ctrl2', function ($scope)
    {
      $scope.name = "Steve";
    });

  </script>
  <title>Test Controllers</title>
</head>
<body>
  <div ng-app="app1">
    <div ng-controller="Ctrl1">
      <span>{{name}}</span>
    </div>
  </div>
  <div ng-app="app2">
    <div ng-controller="Ctrl2">
      <span>{{name}}</span>
    </div>
  </div>
</body>
</html>

I have two ng-app and two controllers. But only the first one seems to work. The name Jack is shown but Steve does not. Why?

解决方案

The JSFiddle showing the problem is here: http://jsfiddle.net/DEnB2/

Automatic initialization of a ng-app directive occurs only once but you can manually initialize additional modules using the bootstrapping method. (See: https://docs.angularjs.org/guide/bootstrap)

The JSFiddle with the solution is here: http://jsfiddle.net/DEnB2/5/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
  <script>
    var app1 = angular.module('app1', []);

    app1.controller('Ctrl1', function ($scope)
    {
      $scope.name = "Jack";
    });

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

    app2.controller('Ctrl2', function ($scope)
    {
      $scope.name = "Steve";
    });

    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById('app2'), ['app2']);
    });   
  </script>
  <title>Test Controllers</title>
</head>
<body>
  <div ng-app="app1">
    <div ng-controller="Ctrl1">
      <span>{{name}}</span>
    </div>
  </div>
  <div id="app2">
    <div ng-controller="Ctrl2">
      <span>{{name}}</span>
    </div>
  </div>
</body>
</html>

这篇关于同一文件中的多个应用程序和控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆