4

Angular ui-router を使用すると、コントローラーで使用できるさまざまなインジェクションを解決できます。

単純な汎用 ListController を作成し、ui-router で、その特定のビューに固有の CRUD 関数を含むオブジェクトをテンプレートと共に注入しています。

たとえば、同じ "crud" 構文を持つ 2 つのサービスがあるとします。

addPerson(person, callback){}
deletePerson(person, callback){}
editPerson(person, callback){}
....
addCar(car, callback){}
deleteCar(car, callback){}
editCar(car, callback){}
....

これらのサービスの CRUD 関数を汎用コントローラーにマップするマッピング オブジェクトを作成しました。これは、ui.router を介して注入されます。

汎用コントローラー:

controller('ListCtrl', ['$scope', 'itemList', 'functions', function ($scope, itemList,   functions) {
    $scope.itemList = itemList;

    $scope.addItem = function(){
        functions.add($scope.item, callback);
    }
    .....
}

ルーター:

        .state('app.people', {
            url: '/people',
            templateUrl: 'views/people.html',
            resolve: {
                    functions: ['People', function(People){
                        return {
                        add: People.createPerson,
                        update: People.updatePerson,
                        delete: People.deletePerson,
                        getItemList: People.getPeopleList
                    }
                    }],
                itemList: ['$q', 'People', function($q, People){
                var deferred = $q.defer();
                    People.getPeopleList(function(resp, status){
                        deferred.resolve(resp);
                    });
                    return deferred.promise;
                }],
                },
            controller: 'GenericController'
        })

そのため、状態定義に別の関数マッピングを挿入するだけで、車でも使用できます。

魅力のように機能します。

しかし、完全なビューだけでなく、div 内でコントローラーを使用できるようにしたいと考えています。ここに問題があります:

ng-controller ディレクティブを使用すると、インジェクターは、'itemList' または 'functions' (マッピング オブジェクト) として何を提供すればよいかわかりませんが、$controller オブジェクトを介してインスタンス化すると、'' t には独自のスコープがあり、

Unknown provider: $scopeProvider <- $scope

独自の子スコープを作成できないため.. $rootScope.$new() などを使用して新しいスコープを作成できると思いますが、ハッキングのように感じすぎます。角度的には、これはこのようなものには悪いアプローチかもしれないと思います..

任意のヒント?

4

1 に答える 1