Angular JS передает атрибуты в шаблон директивы

У меня есть специальная директива для datepicker. Я хочу повторно использовать его в нескольких разных местах. Но для повторного использования текущей директивы я должен динамически передавать и изменять различные атрибуты в директиве my-datepicker.

Если вы заглянете в datepicker.html, я использую следующие атрибуты: ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened".

Вопрос: Как мне установить эти атрибуты на уровне элемента my-datepicker и полностью перейти к моему шаблону директивы html? Я хочу добиться чего-то такого:

<my-datepicker ng-model="departureDate1" min-date="minDateDeparture1" is-open="departureOpened1"></my-datepicker>

<my-datepicker ng-model="departureDate2" min-date="minDateDeparture2" is-open="departureOpened2"></my-datepicker>

Спасибо за любую помощь!

datepicker-contoller.js

app.directive('myDatepicker', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/datepicker/datepicker.html'
    };
});

datepicker.html

<fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open1($event)" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>

Использование Datepicker

    <div ng-controller="MyController">
        <div class="col-md-2">
            <my-datepicker></my-datepicker>
        </div>

        <div class="col-md-2">
            <my-datepicker></my-datepicker>
        </div>
    </div>

datepicker angularjs angularjs-directive angular-ui
person Wild Goat    schedule 02.08.2015    source источник
comment
docs.angularjs.org/guide/   -  person JB Nizet    schedule 02.08.2015

Ответы (1)


arrow_upward
3
arrow_downward

Обновление: см. Этот jsFiddle: http://jsfiddle.net/j31ky7c2/

Вы можете передавать данные, а также функции в качестве атрибута в своей директиве.

<my-datepicker min-date="minDateDeparture2" is-open="departureOpened2" some-function="testFunction()"></my-datepicker>

Вы можете получить эти данные в рамках своей директивы.

directive('myDatepicker', [function() {
return {
    restrict: 'E',
    scope: {
        minDate: '@',
        isOpen: '@',
        someFunction: '&'
    },
    link: function(scope, elm, attrs) {
    }
}
}]);

Затем вы можете просто использовать minDate, isOpen и someFunction в своем шаблоне директивы, например:

<div ng-bind="{{::minDate}}"></div>
<div ng-bind="{{::isOpen}}"></div>
<Button ng-click="someFunction()">Click me</Button>
person Praveen Singh    schedule 02.08.2015
comment
Большое спасибо за подробный ответ! Как передать имя функции с уровня элемента в директиву? ng-click="open1($event)" - person Wild Goat; 02.08.2015
comment
Используйте 1_ - person Itamar L.; 03.08.2015
comment
@ItamarL. не могли бы вы привести мне пример, как мне вызвать его на моей странице .html? - person Wild Goat; 03.08.2015
comment
@WildGoat, я обновил свой ответ, включив в него пример, показывающий, как передать функцию директиве. - person Praveen Singh; 03.08.2015
comment
@ pravee-n, я сделал именно то, что вы сказали, но, к сожалению, при ng-click не запускается событие. Не могли бы вы подготовить пример JSfiddler, используя templateUrl и .hmtl файл шаблона? Спасибо! - person Wild Goat; 03.08.2015
comment
@WildGoat Я обновил свой ответ, добавив jsFiddle. - person Praveen Singh; 04.08.2015