zwei Controller in einem Modul funktioniert nicht

Ich versuche, Scope-Wert von 2 Controllern zu drucken. Es druckt den Wert nicht vom zweiten Controller. Was ist mein Fehler?zwei Controller in einem Modul funktioniert nicht

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

<div ng-app="myApp" ng-controller="Ctrl1"> 
{{carname}} 
</div> 

<div ng-app="myApp" ng-controller="Ctrl2"> 
{{carname}} 
</div> 

<script> 
var app = angular.module('myApp', []); 

app.controller('Ctrl1', function($scope) { 
    $scope.carname = "Honda"; 
}); 

app.controller('Ctrl2', function($scope) { 
    $scope.carname = "Toyota"; 
}); 
</script>

Quelle

2016-12-07 Kurkula

Sie haben zwei Anwendungen definiert. –

Sie definiert zwei ng-app, eckig wird die erste App Bootstrap es auf der Seite findet und nicht die zweite. Daher funktioniert der zweite nicht.

Definieren Sie die App für das Element, das alle Steuerungselemente abdeckt.

Beispiel Snippet:

var app = angular.module('myApp', []); 
 

 
app.controller('Ctrl1', function($scope) { 
 
    $scope.carname = "Honda"; 
 
}); 
 

 
app.controller('Ctrl2', function($scope) { 
 
    $scope.carname = "Toyota"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="Ctrl1"> 
 
    {{carname}} 
 
    </div> 
 

 
    <div ng-controller="Ctrl2"> 
 
    {{carname}} 
 
    </div> 
 
</div>

Quelle

2016-12-07 21:13:27

Zwei ng-app auf einer einzigen Seite funktioniert nicht, es wird nur die erste Instanz von ng-app und die anderen ignoriert werden Kompilieroptionen.

Es scheint, als wollten Sie zwei Controller auf der gleichen Seite verwenden. Was Sie tun können, ist, können Sie ng-app Direktive auf Körper Ebene bewegen & haben ng-controller auf zwei verschiedenen divs.

<body ng-app="myApp"> 
    <div ng-controller="Ctrl1"> 
    {{carname}} 
    </div> 

    <div ng-controller="Ctrl2"> 
    {{carname}} 
    </div> 
</body>

Quelle

2016-12-07 21:08:12

Sie brauchen nicht ng-App für jedes div, Ihre HTML wie folgt ändern:

<body ng-app="myApp"> 
    <div ng-controller="Ctrl1"> 
     {{carname}} 
    </div> 

    <div ng-controller="Ctrl2"> 
     {{carname}} 
    </div> 
</body>

Quelle

2016-12-07 21:09:11 Yaser

Da Sie Ihre App zweimal definiert. Versuchen Sie diesen Code zu verwenden:

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

 
<div ng-app="myApp"> 
 
    <div ng-controller="Ctrl1"> 
 
    {{carname}} 
 
    </div> 
 

 
    <div ng-controller="Ctrl2"> 
 
    {{carname}} 
 
    </div> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 

 
app.controller('Ctrl1', function($scope) { 
 
    $scope.carname = "Honda"; 
 
}); 
 

 
app.controller('Ctrl2', function($scope) { 
 
    $scope.carname = "Toyota"; 
 
}); 
 
</script>

Quelle

2016-12-07 21:10:21

zwei Controller in einem Modul funktioniert nicht

Antwort

Verwandte Themen