Передача директивы формы обратного вызова функции контроллера в AngularJS

У меня есть директива и контроллер. Директива определяет функцию в изолированной области. Он также ссылается на функцию в контроллере. Эта функция принимает обратный вызов. Однако, когда я вызываю его из директивы и передаю обратный вызов, обратный вызов передается как неопределенный. Код ниже сделает это более понятным:

Директива

directive('unflagBtn', ["$window", "api",
    function($window, api) {
        return {
            restrict: "E",
            template: "<a ng-click='unflag(config.currentItemId)' class='btn btn-default'>Unflag</a>",
            require: "^DataCtrl",
            scope: {
                config: "=",
                next: "&"
            },
            controller: ["$scope",
                function($scope) {
                    $scope.unflag = function(id) {
                        $scope.next(function() { //this callback does not get passed
                            api.unflag(id, function(result) {
                                //do something
                                return
                            });
                        });
                    };
                }
            ]
        };
    }
]);

Контроллер

controller('DataCtrl', ['$rootScope', '$scope', 'api', 'dataManager', 'globals',
    function($rootScope, $scope, api, dataManager, globals) {
        ...
        $scope.next = function(cb) { //This function gets called, but the callback is undefined.
            // do something here 
            return cb ? cb() : null;
        };
    }
]);

HTML

<unflag-btn config="config" next="next(cb)"></unflag-btn>

Я прочитал здесь Как передать аргумент методу, определенному в контроллере, но вызываемому из директивы в Angularjs? что при передаче параметров из директив в функции контроллера параметры необходимо передавать как объекты. Итак, я попробовал что-то вроде этого:

$scope.next({cb: function() { //this callback does not get passed still
    api.unflag(id, function(result) {
        //do something
        return
    });
}});

Но это не сработало. Я не уверен, имеет ли это значение, но я должен отметить, что директива находится внутри формы, которая на своем месте находится внутри контроллера. Просто для иллюстрации структуры:

<controller>
   <form>
        <directive>
   <form>
<controller>

Надеюсь понятно и заранее спасибо!


person Levon Tamrazov    schedule 29.03.2014    source источник
comment
Что ты пытаешься сделать. Вы пытаетесь передать обычный контроллер в директиву. при использовании required вы получаете контроллер в этом случае родительской директивы. Это способ общения между директивой. Можете ли вы объяснить, что вы пытаетесь сделать.   -  person Jorge Enrique Reyes Salas    schedule 31.03.2014
comment
Функция next() находится в контроллере и управляет представлением. Требуется обратный вызов. Я пытаюсь получить доступ к этой функции с помощью разных директив. Я делаю это таким образом, потому что хочу, чтобы разные директивы передавали функции разные обратные вызовы в зависимости от того, что мне нужно сделать. Но по какой-то причине, когда я вызываю next из директивы и передаю ей обратный вызов, когда контроллер получает вызов, обратный вызов не определен... Надеюсь, это проясняет?   -  person Levon Tamrazov    schedule 01.04.2014


Ответы (2)


Попробуй это

        controller: ["$scope",
            function($scope) {
                $scope.unflag = function(id) {
                    $scope.next({
                        cb: function() { //this callback does not get passed
                            api.unflag(id, function(result) {
                                //do something
                                return;
                            });
                        }
                    });
                };
            }
        ]
person Jorge Enrique Reyes Salas    schedule 01.04.2014
comment
Привет, извините за поздний ответ. Но это не сработало... когда контроллер получает вызов next(), cb все еще не определен. - person Levon Tamrazov; 18.04.2014

Итак, я непреднамеренно понял, что не так, после того, как не смог передать объект обратно в контроллер. Что произошло (и что я, вероятно, должен был упомянуть в вопросе, если бы знал, что это актуально), так это то, что родительская область этой директивы unflagbtn на самом деле является областью действия другой директивы, которая у меня есть, назовите ее secondDirective. В свою очередь secondDirective получает свой объем от "DataCtrl". Упрощенный код выглядит так:

directive("secondDirective", [function(){
    require: "^DataCtrl" // controller
    scope: {
        next: "&" // function that I was trying to call
    }
    ...
    // other code
    ...
}]);

directive("unflagbtn", [function(){
    require: "^DataCtrl" // controller 
    scope: {
        next: "&"
    }, 
    controller: ["$scope", function($scope){
        $scope.unflag = function(){
            $scope.next({cb: {cb: callBackFunctionIWantedToPass}); // this is what worked
        }
    }
}]);

Таким образом, передача обратного вызова таким образом решила мою проблему, когда она вернулась к контроллеру. Скорее всего, это уродливо из-за моего плохого понимания angular, поэтому я извиняюсь, поскольку это, скорее всего, неправильный способ сделать это, но это решило мою проблему, поэтому я решил поделиться.

Ваше здоровье,

person Levon Tamrazov    schedule 10.07.2014