angularjs - Multiple apps and controllers in the same file

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

angularjs - Multiple apps and controllers in the same file

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

988 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:18:23+0000

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>

Categories

angularjs - Multiple apps and controllers in the same file

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags