angularjs - Angular JS 将属性传递给指令模板

Question

我有日期选择器的自定义指令。我想在几个不同的地方重复使用它。但为了重用当前指令，我必须动态地将不同的属性传递并更改为 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'
    };
});

日期选择器.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>

日期选择器的使用

    <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>

Answer 1

更新:请参阅此 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>