2016-01-29 15 views
5

Jestem nowy w AngularJS Mam problem z tym kodem. Chcę dodać wiele kontrolerów w jednym ng-app. Ale wykona pierwszą. Dlaczego nie drugi?Jak dodać wiele kontrolerów na jednej stronie w AngularJS

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angul /1.4.8/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller="cont1"> 
     <input type="text" ng-model="fullname"> 
     {{fullname}} 
    </div> 
    <div ng-controller="cont2"> 
     <input type="text" ng-model="fname"> 
     {{fname}} 
    </div> 
    <script> 
     var app = angular.module("myapp", []); 
     app.controller('cont1', function ($scope) { 
      $scope.fullname = ""; 
     }); 
     var new = angular.module('myapp', []); 
     new.controller('cont2', function ($scope) { 
      $scope.fname = ""; 
     }); 
    </script> 
</body> 
</html> 

Odpowiedz

7

Ponieważ są nadpisywania pierwszy moduł myapp kiedy robisz var new= angular.module('myapp',[]);.

Twój kod powinien być:

var app = angular.module("myapp", []); 
app.controller('cont1', function($scope) { 
    $scope.fullname = ""; 
}); 
app.controller('cont2', function($scope) { 
    $scope.fname = ""; 
}); 

lub

var app = angular.module("myapp", []); 
app.controller('cont1', function($scope) { 
    $scope.fullname = ""; 
}); 
angular.module("myapp").controller('cont2', function($scope) { 
    $scope.fname = ""; 
}); 

Drugi parametr [] przekazane module() czyni różnicę

+2

masz całkowitą rację co do parametru []. ale ta składnia jest lepsza (nie używaj aplikacji var): 'angular.module (" myapp ", []); angular.module ("myapp"). Controller ('cont1', function ($ scope) {...}); angular.module ("myapp"). Controller ('cont2', funkcja ($ scope) {...}); ' – AlainIb

0
you can define multiple controllers in single module in this way also 

    angular.module("myapp",[]); 
    .controller('cont1',function($scope){ 
     $scope.fullname=""; 
     }); 

    .controller('cont2',function($scope){ 
    $scope.fname=""; 
    }); 

Podczas definiowania modułów nie używać var można znaleźć jedne z najlepszych praktyk kątowych tutaj Angular Style Guide/Best Practices

0

Aby najlepiej zdefiniować kontrolery, dyrektywy, fabryk itp ... jest

określić moduły nazwy w osobnym pliku

aplikacji. module.js

angular.module("myapp",[]); // inside [] you define your module dependencies 

kontrolerów utworzyć osobny plik (w zależności od potrzeb można tworzyć nawet 1 na 1 plik sterownika)

some.controller.js

angular.module("myapp").controller('someCtrl'['$scope', function($scope){ 

}]); 

angular.module("myapp").controller('someOtherCtrl'['$scope', function($scope){ 

}]); 

UWAGA:

Dwa typy można napisać kontroler

TYPE1 (nie zalecane)

.controller('ctrlName', function($scope){ 

}); 

TYPE2 (zalecane)

.controller('ctrlName', ['$scope', function($scope){ 

}]); 

Powód

Więc jak widać w type2 jesteśmy przechodzącej zależności regulatora w tablicy, więc kiedy skompilować nasz program kątowa będzie podać nazwę jako np: a do $ scope inside function() i traktuj go jako $ scope.

Z TYPEM1 należy podążać określoną kolejnością, definiując zależność od kontrolera, w przeciwnym razie kątowa przechodzi przez błąd, ponieważ w tym podejściu kątowym traktuje się pierwszą zależność jako $ rootscope, a następnie jako $ scope itd.

EG:

nie można przekazać do kontrolera zależności jak tego

.controller('ctrlName', function($http, $scope) { 

}); 

to rzuci error

jeśli zdefiniować jak

.controller('ctrlName', function($scope, $http) { 

    }); 

to zadziała dobrze, ponieważ jest w porządku Kapelusz chce kąt.

Powiązane problemy