Ошибка с угловой программой

Question

Ошибка с угловой программой

0

Я новичок в angularjs, и при попытке это у меня проблема. Вот мой фрагмент кода. Я определил угловые приложения с именем nameApp, ageApp и там контроллеры. Первое приложение NameApp работает правильно, и моя проблема связана со вторым приложением ageApp. Он работает неправильно.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-app="ageApp" ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Значения firstName и lastName привязываются должным образом, но возраст атрибута неверен.

nitroman 27 июль 2016, в 14:48

Источник

0

Я бы порекомендовал вам использовать одно приложение. в настоящее время у вас есть два SPA в вашем приложении. вместо того, чтобы создавать два приложения, создать одно приложение и создать отдельные модули в одном приложении для обеих частей.
Varit J Patel 27 июль 2016, в 12:34
0

@ varit05 Можете ли вы объяснить немного больше?
nitroman 27 июль 2016, в 12:35
0

продублировать с помощью stackoverflow.com/questions/18571301/… angular.bootstrap (document.getElementById ("App2"), ['ageApp']);
mokarakaya 27 июль 2016, в 12:45

Показать ещё 1 комментарий

Теги:

javascript

angularjs

3 ответа

1

То, что я здесь сделал,

Я nameApp два имени модуля: nameApp и ageApp. и nameApp будет основным модулем, который имеет зависимость ageApp и будет также загружать модуль ageApp.

Так как Angular - одностраничное приложение. мы можем сделать один основной модуль и ввести зависимость других модулей.

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',['ageApp']);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Надеюсь, это поможет вам.

Дайте мне знать, если у вас больше вопросов.

Ура!

varit05 27 июль 2016, в 10:25

0

Как я уже говорил, это дублируется; AngularJS Несколько ng-приложений на странице

Вам нужно загрузиться после создания div, и это не очевидно в дублированном элементе.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      });

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      });      

    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      Firsta name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div id="App2" ng-app="ageApp" ng-controller="ageCtrl">
      Youra Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
  <script>
    angular.bootstrap(document.getElementById("App2"), ['ageApp']);
  </script>
</html>

mokarakaya 27 июль 2016, в 10:20

Ещё вопросы

Я бы порекомендовал вам использовать одно приложение. в настоящее время у вас есть два SPA в вашем приложении. вместо того, чтобы создавать два приложения, создать одно приложение и создать отдельные модули в одном приложении для обеих частей.
@ varit05 Можете ли вы объяснить немного больше?
продублировать с помощью stackoverflow.com/questions/18571301/… angular.bootstrap (document.getElementById ("App2"), ['ageApp']);

Maria Ines Parnisari · Accepted Answer · 2016-07-27T11-12-00.000Z

Эту проблему можно найти, посмотрев документы для директивы ngApp:

Только одно приложение AngularJS может автоматически загружаться в HTML-документ. Первый ngApp, найденный в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Чтобы запустить несколько приложений в документе HTML, вы должны вручную angular.bootstrap их с помощью angular.bootstrap.