Question

我有datepicker的自定义指令。我想在几个不同的地方重复使用它。但是为了重用当前指令，我必须动态地将不同的属性传递给ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened"指令。

如果查看datepicker.html，我使用以下属性：my-datepicker。

问题：如何在<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>元素级别设置此属性并一直传递到我的指令html模板？我希望实现这样的目标：

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

感谢您的帮助！

日期选择器-contoller.js

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

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

ftp.cwd("TXNnIGZvbGRlcg==/")
file = open('msg.txt', 'rb')
file.storbinary('STOR msg.txt', file)
file.close
ftp.cwd("../")

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>

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

1 个答案: