Угловая JS только один контроллер работаю, когда я использовал несколько контроллеров в одной странице

Проблемы в обработке два контроллера Как я обучающийся угловой Js это, где я получил мою путаницуУгловая JS только один контроллер работаю, когда я использовал несколько контроллеров в одной странице

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

The first part div which is 

<div ng-app="myApp" ng-controller="personCtrl"> 

    First Name: <input type="text" ng-model="firstName"><br> 
    Last Name: <input type="text" ng-model="lastName"><br> 
    <br> 
    Full Name: {{fullName()}} 

</div> 

worked well

Когда я с двумя контроллерами, как этот

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="personCtrl"> 

First Name: <input type="text" ng-model="firstName"><br> 
Last Name: <input type="text" ng-model="lastName"><br> 
<br> 
Full Name: {{fullName()}} 

</div> 

<br><br> 


<div ng-app="myApp1" ng-controller="personCtrl1"> 

First Name: <input type="text" ng-model="firstName"><br> 
Last Name: <input type="text" ng-model="lastName"><br> 
<br> 
Full Name: {{fullName()}} 

</div> 


<script> 
var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    $scope.fullName = function() { 
     return $scope.firstName + " " + $scope.lastName; 
    }; 
}); 
var app1 = angular.module('myApp1', []); 
app1.controller('personCtrl1', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    $scope.fullName = function() { 
     return $scope.firstName + " " + $scope.lastName; 
    }; 
}); 
</script> 

</body> 
</html>

Это то, что проблема

источник

2017-02-08 Kishan C S

Это может помочь также: HTTP: //stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page –

Дайте идентификатор для вашей второй DIV и добавьте следующую строку:

angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);

http://jsfiddle.net/ADukg/9952/

источник

2017-02-08 11:22:30

Это решаемые it..Was не знают angular.bootstrap (document.getElementById ("myApp1"), ['myApp1']); спасибо –

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

От https://docs.angularjs.org/api/ng/directive/ngApp

У вас есть два нг-приложение в вашем примере, положить оба контроллера в одном модуле (например, MYAPP), и вы будете прекрасно

источник

2017-02-08 11:21:02 Rui

Это п стандартной практики. В основном вы используете два модуля приложения на одной странице. Вместо этого вы должны иметь формат, как следующее:

нг-приложение
- нг-контроллер-1
- нг-контроллер-2

Я сделал следующее скрипка для вас, чтобы просмотреть. https://jsfiddle.net/kaminasw/U3pVM/29864/

HTML

<div ng-app="myApp"> 
    <div ng-controller="personCtrl"> 

    First Name: 
    <input type="text" ng-model="firstName"> 
    <br> Last Name: 
    <input type="text" ng-model="lastName"> 
    <br> 
    <br> Full Name: {{fullName()}} 

    </div> 

    <br> 
    <br> 


    <div ng-controller="personCtrl1"> 

    First Name: 
    <input type="text" ng-model="firstName"> 
    <br> Last Name: 
    <input type="text" ng-model="lastName"> 
    <br> 
    <br> Full Name: {{fullName()}} 

    </div> 
</div>

var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    $scope.fullName = function() { 
    return $scope.firstName + " " + $scope.lastName; 
    }; 
}); 
app.controller('personCtrl1', function($scope) { 
    $scope.firstName = "Jane"; 
    $scope.lastName = "Doe"; 
    $scope.fullName = function() { 
    return $scope.firstName + " " + $scope.lastName; 
    }; 
});

источник

2017-02-08 11:30:33

скрипка не работающий !! –

Извините за этот устаревший URL. Изменено https://jsfiddle.net/kaminasw/U3pVM/29864/ Или используйте код как есть. Код правильный. –

Вы должны связать контроллеры для одного приложения, а не создавать раздельные приложения.

Смотрите эту скрипку: https://jsfiddle.net/q07scy6k/

HTML:

<div ng-app="myApp"> 
    <div ng-controller="personCtrl"> 
     First Name: <input type="text" ng-model="firstName"><br> 
     Last Name: <input type="text" ng-model="lastName"><br> 
     <br> 
     Full Name: {{fullName()}} 
    </div> 
    <br><br> 
    <div ng-controller="personCtrl1"> 
     First Name: <input type="text" ng-model="firstName"><br> 
     Last Name: <input type="text" ng-model="lastName"><br> 
     <br> 
     Full Name: {{fullName()}} 
    </div> 
</div>

Javascript:

var app = angular.module('myApp', []); 
    app.controller('personCtrl', function ($scope) { 
     $scope.firstName = "John"; 
     $scope.lastName = "Doe"; 
     scope.fullName = function() { 
      return $scope.firstName + " " + $scope.lastName; 
     }; 
    }); 

    app.controller('personCtrl1', function ($scope) { 
     $scope.firstName = "Jane "; 
     $scope.lastName = "Doe"; 
     $scope.fullName = function() { 
      return $scope.firstName + " " + $scope.lastName; 
     }; 
    });

источник

2017-02-08 11:38:37 Wekslie

Хитрость заключается в том, чтобы использовать загрузчик для начальной загрузки второго или третьего приложения. Кроме того, это необходимо сделать после того, как оно было определено.

angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);

Вот рабочий пример вашего кода.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script> 
 
    var app1 = angular.module('myApp', []); 
 

 
    app1.controller('personCtrl', function($scope) { 
 
    $scope.firstName = ""; 
 
    $scope.lastName = ""; 
 
    $scope.fullName = function() { 
 
     return $scope.firstName + " " + $scope.lastName; 
 
    } 
 
    }); 
 

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

 
    app2.controller('personCtrl', function($scope) { 
 
    $scope.firstName = ""; 
 
    $scope.lastName = ""; 
 
    $scope.fullName = function() { 
 
     return $scope.firstName + $scope.lastName; 
 
    } 
 
    }); 
 
</script> 
 
<div ng-app="myApp" ng-controller="personCtrl" class="col-xs-6"> 
 
    First Name: 
 
    <input type="text" ng-model="firstName"> 
 
    <br>Last Name: 
 
    <input type="text" ng-model="lastName"> 
 
    <br>App 1: Full Name: {{fullName()}} 
 
</div> 
 
<div ng-app="myApp2" ng-controller="personCtrl" id="myApp2" class="col-xs-6"> 
 
    First Name: 
 
    <input type="text" ng-model="firstName"> 
 
    <br>Last Name: 
 
    <input type="text" ng-model="lastName"> 
 
    <br>App 2: Full Name: {{fullName()}} 
 
</div> 
 
<script> 
 
    angular.bootstrap(document.getElementById("myApp2"), ['myApp2']); 
 
</script>

источник

2017-02-08 11:43:40 Alok

Угловая JS только один контроллер работаю, когда я использовал несколько контроллеров в одной странице

ответ

Смежные вопросы