3

Angular の制限 (おそらく) によるものなのか、Angular の知識の制限によるものなのか (おそらく) わからない問題があります。

コントローラーの配列を取り、それらを動的に作成/ロードしようとしています。コントローラーが実行され、ルート スコープにアクセスできるようになるまでプロトタイプが動作していますがng-controller、コントローラーを独自のローカル スコープにカプセル化するために div に動的にアタッチすることはできません。

問題は、テンプレートがルート スコープにバインドされているが、独自のスコープにはバインドされていないことです。

私の例は、うまくいけば私の難問をよりよく説明するでしょう.

JSFiddle: http://jsfiddle.net/PT5BG/22/ (最終更新 16:30 BST)

なぜこのようにしているのか理解できないかもしれませんが、私が作成しているより大きなシステムからこの概念を引き出しました。他の提案がある場合、これらは私が拘束される法律です:

  • コントローラーはハードコーディングできません。配列から構築する必要があります
  • スコープはコントローラ間で共有できません。独自のスコープが必要です

AngularJS のドキュメントは完全に包括的ではないので、ここの誰かが助けてくれることを願っています!

4

2 に答える 2

1

コントローラー名を$controller渡してサービスを使用し、ローカルをそれに渡すことができます。ModuleCtrlこれらすべてを調整するには、何らかのものが必要になります。これは、あなたが望むことをする基本的な例です。

http://jsfiddle.net/PT5BG/62/

angular.module('app', [])
.controller('AppCtrl', function ($scope, $controller) {
    $scope.modules = [
        { name: "Foo", controller: "FooCtrl" },
        { name: "Bar", controller: "BarCtrl" }]
})
.controller('ModuleCtrl', function ($scope, $rootScope, $controller) {
    $controller($scope.module.controller, { $rootScope: $rootScope, $scope: $scope });
})
.controller('FooCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am foo";
    $scope.localMessage = "I am foo";
    console.log("Foo here");
})
.controller('BarCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am bar";
    $scope.localMessage = "I am bar";
    console.log("Bar here");
});
于 2013-10-19T18:24:41.543 に答える
0

私が最終的にこれを回避した方法は非常に単純でした。

APIから取得したモジュールのリストがあり、それらをインスタンス化したいと考えています。次のように、規則に従ってパスを構築することにより、テンプレート ファイルを含めます。

<!-- the ng-repeat part of the code -->
<div ng-repeat="module in modules">
    <ng-include src="module.name + '.tpl.html'"></ng-include>
</div>

次に、各モジュール テンプレート ファイルで を宣言し、ng-controller で起動するメソッドを宣言しng-initます。テンプレートはまだng-repeatループ内moduleにあるため、子コントローラーに渡したいデータを含む にアクセスできます。ng-initローカル スコープで実行されるため、モジュール オブジェクトを渡します。

<!-- the template of the module -->
<div ng-controller="ModuleCtrl" ng-init="init(module)">
    ...
</div>

そして、それをローカル スコープに保存し、そこにオブジェクトを挿入します。

/* the controller of the module */
.controller('ModuleCtrl', function ($scope) {
    $scope.init = function(module) {
        this.module = module;
    };

    // this.module is now available inside the controller
});

少しハッキングが必要でしたが、今のところ完全に機能しています。

于 2013-10-20T08:25:19.227 に答える