1つのモジュール内に2つのコントローラが動作しない

2つのコントローラから有効範囲の値を出力しようとしています。 2番目のコントローラから値を印刷していません。私の間違いは何ですか？単一ページの1つのモジュール内に2つのコントローラが動作しない

<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>

出典

2016-12-07 Kurkula

あなたが定義された2つのアプリを持っています。 –

次の2つのng-appを定義し、角度は、それがページではなく二番目に見つかった最初のアプリをブートストラップします。したがって、2つ目は動作しません。

すべてのコントローラエレメントをカバーするエレメントにappを定義します。

例スニペット：

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>

出典

2016-12-07 21:13:27

二ng-app動作しません、それはng-appの唯一の第一のインスタンスをコンパイルし、他は無視されます。

同じページに2つのコントローラを使用したかったようです。あなたができることは、身体レベル&のng-app指示を2つの異なるdivにng-controller持っていることです。

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

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

出典

2016-12-07 21:08:12

あなたは、このようなあなたのhtmlの変更、それぞれのdivのためにNGアプリは必要ありません：あなたは二回にアプリを定義しているので

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

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

出典

2016-12-07 21:09:11 Yaser

を。このコードを使用してみてください：

<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>

出典

2016-12-07 21:10:21

1つのモジュール内に2つのコントローラが動作しない

答えて

関連する問題