3

非常に簡単な解決策があると思う簡単な質問がありますが、どういうわけかそれがありません。

アプリに簡単なディレクティブを設定しています。コントローラのスコープを共有したいので、スコープ プロパティをデフォルトの「false」に設定したままにします。

問題は、そのスコープにアクセスできないように見えることです。

私のリンク機能では、次のことができます。

console.dir(scope)

そして、スコープオブジェクトで私が探しているプロパティ（「ページ」）を確認できます。

私がやろうとすると：

console.dir(scope.pages)

ただし、未定義として返されます。

私は何が欠けていますか？

前もって感謝します。

MyDirectives.directive("mdPagination", function(){
    return {
        templateURL: "/templates/pagination.html",
        replace: true,
        restrict: 'A',
        scope: false, //default
        link: function(scope, element, attrs){ 
            console.log('in linking function');
            console.dir(scope);
            console.dir(element);
            console.dir(attrs);
            console.dir(scope.pages);
        }
    }
});

テンプレート:

<nav class="pagination" md-Pagination></nav>

コントローラー:

App.controller('MachinesListCtrl', function ($scope, $routeParams, $location, MachineServices, CustomerServices) {

    var page = ($routeParams.page ? $routeParams.page : 1);

    //if we are getting all machines based on their customer id.
    if($routeParams.customerID){
        MachineServices.getByCustomerId($routeParams.customerID).then(function (data) {
            _.each(data.results, function (machine, index, list) {
                CustomerServices.get(machine.customer_id).then(function(data){
                    machine.CustomerData = data.results;
                });
            });

            $scope.Machines = data.results;
            $scope.pages = data.pages;
        });
    }
    //otherwise we just want the regular list of machines.
    else{
        MachineServices.query(page).then(function (data) {
            _.each(data.results, function (machine, index, list) {
                CustomerServices.get(machine.customer_id).then(function(data){
                    machine.CustomerData = data.results;
                });
            });

            $scope.Machines = data.results;
            $scope.pages = data.pages;
        });
    }
});
4

4 に答える 4

1

MachineServices に angular $resource を使用しているようですね。これにより、すぐにバインドできる結果用の空のオブジェクトまたは配列が作成され、呼び出しが非同期で完了すると、後で結果が入力されます。linkangular によって呼び出されると、まだデータが取り込まれません。

queryまず、呼び出しにログを追加しgetByCustomerIdて、値を取得し、スコープのプロパティを正しく設定していることを確認します。テンプレートのどこかに追加{{pages|json}}して、変更されたページの JSON を表示します。それが表示された場合、変更時に何か特別なことをする必要がある場合は、ディレクティブでそのプロパティを監視できます。

MyDirectives.directive("mdPagination", function(){
    return {
        templateURL: "/templates/pagination.html",
        replace: true,
        restrict: 'A',
        scope: false, //default
        link: function(scope, element, attrs){ 
            console.log('in linking function');
            console.dir(scope);
            console.dir(element);
            console.dir(attrs);
            console.dir(scope.pages);

            // watch pages for changes
            scope.$watch('pages', function(value) {
                console.log("pages now has this value:");
                console.dir(scope.pages);
            });
        }
    }
});
于 2013-10-06T20:24:37.397 に答える