Как передать данные из директивы в контроллер?

Question

Как передать данные из директивы в контроллер?

0

В настоящее время я работаю над интеграцией плагина в моем угловом приложении, и я пытаюсь преобразовать его в директиву. Я искал события и методы плагина, но не смог получить желаемые результаты. здесь мой код:

HTML

<div class="input-daterange datepicker full" rangepicker ng-model="packer.selected.date">
    <i class="fa fa-calendar"></i>
    <div class="inputs datepicker">
        <input 
            ng-model="packer.selected.date.start"
           name="start" 
           value="<% packer.initData.dateStart %>">
        <span class="add-on">-</span>
        <input 
            ng-model="packer.selected.date.end"
           name="end" 
           value="<% packer.initData.dateStart %>">
    </div>
</div>

Javascript:

Application.directive('rangepicker', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {

            $(element).datepicker({
                format: 'yyyy-mm-dd'
            });

            $(element).on('changeDate', function(){
                /*
                $(element).find('input').each(function(){
                    $(this).trigger('input');

                }) */                
            })

        }
    };
});

Application.controller('PackingStatisticsController', ['$scope', '$http', 'initData', function($scope, $http, initData) {

    var packer = this;
    packer.initData = initData;

    packer.selected = {
        date : {
            start : "",
            end : ""
        },
        user : ""
    }

    packer.log = function()
    {
        console.log(packer.selected);
    }


}]);

Я читал все, что, как я думал, имел отношение к моей проблеме, но мне не удалось пролить завесу замешательства. Прокомментированный код должен инициировать событие изменения входного значения, которое, я надеюсь, обновит модель. Я не понимаю, где модель, которую я обозначаю в html, соответствует моим директивным данным.

https://bootstrap-datepicker.readthedocs.org/en/latest/index.html это плагин, с которым я работаю.

Jonathan Szekely 06 июль 2015, в 13:26

Источник

Теги:

angularjs

2 ответа

1

вы можете передать в качестве атрибута модель, которую вы хотите изменить из области контроллера, как это (посмотрите на свойство scope):

Application.directive('rangepicker', function() {
return {
    restrict: 'A',
    scope : {
       model : '='
    }
    link: function(scope, element, attrs, ngModel) {

        $(element).datepicker({
            format: 'yyyy-mm-dd'
        });

        $(element).on('changeDate', function(){
            /*
            $(element).find('input').each(function(){
                $(this).trigger('input');

            }) */                
        })

    }
};
});

и в html:

<div class="input-daterange datepicker full" model="myModelVar" rangepicker ng-model="packer.selected.date">

теперь myModeVar является двухсторонней связью данных. как только вы измените его в директиве, он изменится в области контроллера.

в контроллере:

Application.controller('PackingStatisticsController', ['$scope', '$http', 'initData', function($scope, $http, initData) {
    $scope.myModelVar = ...;
}]);

Dima Gimburg 06 июль 2015, в 09:11

0

я тоже видел это решение, но оно мне не очень нравится. я буду использовать его, если я не смогу сделать это лучше, но я надеюсь, что смогу сделать это - установить привязку данных для ng-модели и использовать ее так же, как при обычном вводе, или это невозможно ? или это только область действия для передачи данных из директивы?
Jonathan Szekely 06 июль 2015, в 12:47
0

Это то, как я это использую, но я был бы рад услышать и другие способы.
Dima Gimburg 06 июль 2015, в 12:52

Ещё вопросы

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

Jonathan Szekely · Accepted Answer · 2015-07-06T12-38-00.000Z

Увы, я сделал это!

Application.directive('rangepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',    // added the ngmodel requirement
        scope : {              
            ngModel: "="
        },  // also added this, which if i understood well
            // makes the 2 way data binding possible
        link: function(scope, element, attrs) {

            $(element).datepicker({
                format: 'yyyy-mm-dd'
            });

            $(element).on('changeDate', function(){
                var values = $(element).find('input');
                var interval = {
                    start : values[0].value,
                    end : values[1].value
                }                

                scope.$apply(function(){
                    // and here i update the given model scope (packer.selected.data)
                    scope.ngModel = interval;
                });

            })

        }
    };
});

да, почти то, что я делаю, но вам потребовалась угловая сборка ngModel, вероятно, это предпочтительный способ, но я использую свойство require только тогда, когда мне нужен доступ к необходимому контроллеру директив. :)