Более одной нг контроллеров в разных <div> на одной странице

Question

Более одной нг контроллеров в разных <div> на одной странице

0

Его день-2 я начал изучать углы. я должен знать

В приложении ng-приложение будет одинаковым для всех или его определением для приложения.
В ng-приложении может быть более 1 нг-контроллера.
На основе имени контроллера мы можем переместить элемент управления в его реализацию.
Приложение может иметь более одного тега div, и каждый div может иметь различный контроллер.

Сверху недостижение я написал ниже пример кода для тестирования:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body  ng-app="expressions" >

<div ng-controller="NGExpressionController">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}

</div>


<div ng-controller="NGExpressionControllerTwo">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}

</div>

<script>

    angular.module('expressions', []).controller('NGExpressionController',function($scope){
        $scope.name="Test Name";
    });


</script>

<script>

    angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
    $scope.address="Kolkata";   
    });
</script>

</body>
</html>

Но выше фрагмента кода, отображающего ниже ошибку:

https://docs.angularjs.org/error/ng/areq?p0=NGExpressionController&p1=not%20a%20function,%20got%20undefined

Где я ошибаюсь? Является ли мое понимание неправильным или неправильная реализация кода. Любая форма помощи будет большой помощью.

MonsterJava 20 апр. 2016, в 14:15

Источник

Теги:

angularjs

ng-controller

2 ответа

0

сначала у вашего кода есть некоторые ошибки, из-за неправильного определения модуля,

    <script>
     angular.module('expressions',[])
      .controller('NGExpressionController',function($scope){
          $scope.name="Test Name";
      })
      .controller('NGExpressionControllerTwo',function($scope){
          $scope.address="Kolkata";   
      });
   </script>

при создании приложения вам необходимо определить модуль один раз, а после определения модуля вы используете этот модуль, вызывая корректный объект модуля, для создания модуля

   angular.module('yourModuleName',[])

для использования этого модуля снова используйте

 angular.module('yourModuleName')

нет необходимости в [], квадратные квадратики, он используется для определения зависимостей для этого модуля, а также при повторном добавлении его в модуль повторной инициализации и вы оставите ранее определенные свойства модуля,

1: ng- директива app будет инициализировать угловое приложение, и оно будет доступно для всего приложения. в любом случае мы можем создать вручную (Bootstrap) несколько угловых приложений в одном приложении ссылки

2: Приложение ng- может иметь несколько контроллеров, мы можем создавать наши контроллеры и связывать их с любыми элементами dom, как мы хотим.

   <div ng-controller="NGExpressionController">
   {{name}}
     <div ng-controller="NGExpressionControllerTwo">
     {{address}}
     </div>
   </div>

3: на основе определенного контроллера мы можем манипулировать нашей логикой или функциями для соответствующих элементов dom

4: очевидно, да, и вы можете вложить свои контроллеры, чтобы использовать наследование $ scope. , обязательно используйте их с умом... счастливое кодирование...

XAVIER K.I 20 апр. 2016, в 09:36

Ещё вопросы

Greg · Accepted Answer · 2016-04-20T10-11-00.000Z

Вы реализуете его дважды (2 <script> tags), что означает, что он больше не узнает первый.

Рабочий Plnkr: https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview

<script>

angular.module('expressions', []).controller('NGExpressionController',function($scope){
    $scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";   
});

Использование <script> для загрузки controllers однако, никогда не является хорошей практикой, но поскольку это только ваш второй день обучения Angular, я оставлю это так :) Во всяком случае, вы всегда можете использовать https://www.codeschool.com/ You я буду учиться.