templateUrlにネストされたAngularJSコントローラを自動的にインスタンス化します

Question

私はAngularを学習しており、とても基本的なアプリケーションを設定しています。ルートのtemplateUrlプロパティを使用してデータをレンダリングする場合、返されるテンプレートにサブコントローラを含めるにはどうすればよいでしょうか？たとえば、「createOrEditItem」テンプレートを「viewItem」テンプレートの一番下に含めて、「createOrEditItem」を後で再利用できるようにするなどです。

ng-controller属性をテンプレートに設定して、アプリレベルで定義したコントローラ名に設定しようとしましたが、有効になっていません。マスタコントローラの内容が設定されているときにインスタンス化する代わりに、これをディレクティブで行う必要がありますか？

Answer 1

はい、質問の後の部分で述べたように、あなたはdirectiveを使用する必要があります。 AngularJS> = v1.5を使用する場合は、プラグ可能でネストもうまく動作するので、componentを選択する必要があります。

ルートのためにも、あなたが直接このようcomponentを使用できることに注意してください：コメントが示唆するように、あなたが自由にhomeコンポーネントのテンプレート内の他のコンポーネントを使用することができ、今

var myMod = angular.module('myMod', ['ngRoute']); 
myMod.component('home', { 
    template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>', 
    //     ^^^^ other components can be used here 
    controller: function() { 
    this.user = {name: 'world'}; 
    } 
}); 

myMod.config(function($routeProvider) { 
    $routeProvider.when('/', { 
    template: '<home></home>' 
    }); 
}); 

。

これはちょっと役立ちます。

Answer 2

ディレクティブを使用できます。

別のオプションは、個別のビュー/ルートを使用することです。 ui-viewタグを追加すると、ビューとルートを定義できます。

これは、ここで説明されています https://scotch.io/tutorials/angular-routing-using-ui-router