モジュールを介して定義された複数のコントローラを使用しても動作しません。

コントローラをグローバル関数として定義すると、すべて正常に動作します。しかし、モジュールを使用してコントローラを宣言して割り当てるときは、最初のコントローラのみがバインディングを解決するために使用されます。私は何が欠けていますか？私が思うモジュールを介して定義された複数のコントローラを使用しても動作しません。

<!doctype html> 
<html> 
<head/> 
<body> 
    <div ng-app="flintstones"> 
    <div ng-controller="flintstoneCtrl"> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </div> 
    <div ng-app="rumbles"> 
    <div ng-controller="rumbleCtrl"> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </div> 
</body> 

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

    var flintstones = angular.module("flintstones", []); 
    flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) { 
    $scope.yourName = "Fred"; 
    }); 

    var rumbles = angular.module("rumbles", []); 
    rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) { 
    $scope.yourName = "Barney"; 
    }); 

</script> 

</html>

出典

2013-04-18 Florian Salihovic

、1ページは、ページ内に複数のアプリを持っている場合は、手動ブートストラップに –

、1ページが一つだけng-appデフォルトとして、あなたのケースでは、あなたが2つのng-app定義を持つことができます。

If you have multiple apps in a page you have to do manual bootstrapping

出典

2013-04-18 10:14:16

感謝をしなければならない、あなたは2 'NG-app'定義を持っているあなたのケースで一つだけ' NG-app'を持つことができますそれは正しいポインタでした。 –

@Arunは正しいです。しかし、あなたのケースでは、実際にAngularを2回ブートストラップしたくないと思っていますが、異なるモジュールで定義されたコントローラを使用するだけです。

これは、通常、必要なすべてのモジュール（たとえば、flintstonesおよびrumbles）に依存するページ/サイトモジュールを持つことで実行されます。

angular.module('flintstones', []).controller('flintstoneCtrl', ...); 
angular.module('rumbles', []).controller('rumbleCtrl', ...); 

// Create a module with dependencies. 
angular.module('myApp', ['flintstones', 'rumbles'])...

あなたのHTMLでは、あなたは、単にそのモジュールからng-app="myApp"やコンテンツを使用し、そのすべての依存関係がアクセスできるようになります。私が思う

<html ng-app="myApp"> 
    <body> 
    <div ng-controller="flintstoneCtrl">...</div> 
    <div ng-controller="rumbleCtrl">...</div> 
    </body> 
</html>

出典

2013-04-18 12:34:36 Martin

追加していただきありがとうございます。しかし実際には、実行時にどのコンポーネントが使用されているかわからないので、実際には手動で各モジュールを手動でブートストラップする必要があります。それはかなり大きなWCMSプロジェクトのためであり、いくつかのページ/コンテキストでは、（私はあなたのアプローチを選択する）コンポーネントのセットを知っているので、私は実際に手ですべてをブートストラップする必要があるいくつかのページ/コンテキストで動作しません。 –

モジュールを介して定義された複数のコントローラを使用しても動作しません。

答えて

関連する問題