Appelez plusieurs modules dans une seule page?

J'ai créé module1 et module2 en une seule page. module1 fonctionne bien, module2 ne fonctionne pas. S'il vous plaît suggérer comment appeler module1 et module2 correctement dans une seule page.Appelez plusieurs modules dans une seule page?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script> 
     var mymodule1 = angular.module('module1', []); 

     mymodule1.directive('btnDirective', function() { 
      return { 
       restrict: 'E', 
       template: '<table>' + 
        '<tr><td>Enter a value:<input type="text" ng-model="a" /></td></tr>' + 
        '<tr><td>Enter b Value:<input type="text" ng-model="b" /></td></tr>' + 
        '<tr><td><button ng-click="add(a,b)">Add</button></td></tr>' + 
        '<tr><td>Sum of two number {{sum}}</td></tr>' + 
        '</table>', 

       link: function($scope, element, attrs) { 

        $scope.sum = 0; 
        $scope.add = function(a, b) { 
         $scope.sum = parseInt(a) + parseInt(b); 
        } 
       } 
      }; 
     }); 
     var mymodule2 = angular.module('module2', []); 

     mymodule2.controller('controller2', function($scope) { 
      $scope.name = 'Second Module Controller!'; 
     }); 

     angular.bootstrap(document.getElementById("app2"), ['module2']); 
    </script> 
</head> 
<body> 
    <h3>Creating Custom Element Directive</h3> 
    <br /> 
    <div ng-app="module1"> 
     <btn-directive></btn-directive> 
    </div> 
    <h1>my module2</h1> 
    <div id="app2" ng-app="module2" ng-controller="controller2"> 
     Name: {{name}} 
    </div> 
</body> 
</html>

Source

2016-08-24 Shakeer Hussain

Vous utilisez ceci:

ng-app="module1"

cela implique que votre application est module1. Vous devez créer un nouveau module (ex: theapp) nécessitant les deux modules.

var app = angular.module('theapp', ['module1', 'module2']);

remplacez le ng-app avec:

ng-app='theapp'

alors vous pouvez avoir:

<body ng-app="theapp" ng-controller="controller2"> 
    <h3>Creating Custom Element Directive</h3><br /> 
    <div> 
    <btn-directive></btn-directive> 
    </div> 
    <h1>my module2</h1> 
    <div> 
    Name: {{name}} 
    </div> 
</body>

Source

2016-08-24 09:55:25 gianlucatursi

Salut, Merci pour votre réponse rapide. J'ai essayé avec ng-app = "theapp" ng-controller = "controller2" –

Le contrôleur 2 ne fonctionne toujours pas

Name: {{name}}

–

Avez-vous vérifié votre console? parce qu'il semble que angulaire est arrêté d'analyser la page – maurycy

Appelez plusieurs modules dans une seule page?

Répondre

Questions connexes