Question

我希望指令中的on-click事件从我的控制器调用一些函数。但由于某种原因，它不起作用。我想在触发事件时扩展我的日期选择器。你能帮我调查一下我目前的构建中出了什么问题吗？

app.js

app.directive('myDatepicker', function() {
    return {
        restrict: 'E',
        scope :{
            model:'=model',
            minDate:'=minDate',
            isOpened:'=isOpened',
            openFunction: '&'
        },
        templateUrl: 'templates/datepicker/datepicker.html',
        link: function(scope, elm, attrs) {
        }
    };
});

app.controller('FlightDatePickerController', function ($scope) {

    $scope.openFunction = function($event, isDepart) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.departureOpened = true;
    }; 
};

datepicker.html

<fieldset>
    <pre>{{model}}</pre>

    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click='openFunction({event:event}, {isDepart:isDepart})' class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>

的index.html

<div ng-controller="FlightDatePickerController">
    <div class="col-md-2">
        <my-datepicker model="departureDate" minDate="minDateDeparture" isOpened="departureOpened" open-function="openFunction($event, isDepart)"></my-datepicker>
    </div>
</div>

Answer 1

您可以向指令添加控制器属性，以便将某些功能绑定到您的模板。

在您的情况下，您可以这样做：

<强>指令

app.directive('myDatepicker', function() {
    return {
        restrict: 'E',
        scope :{
            model:'=model',
            minDate:'=minDate',
            isOpened:'=isOpened'
        },
        templateUrl: 'templates/datepicker/datepicker.html',
        controller: 'FlightDatePickerController'
    };
});

<强> Datepicker.html

  <div ng-controller="FlightDatePickerController">
    <div class="col-md-2">
        <my-datepicker model="departureDate" minDate="minDateDeparture" isOpened="departureOpened"></my-datepicker>
    </div>
</div>

Answer 2

您的整体实施是正确的，但您犯了几个错误。

ng-click应该像在JSON中添加参数一样。

ng-click='openFunction({event:$event, isDepart:isDepart})'

＆安培;那么你的指令元素应该有

open-function="openFunction($event, isDepart)"

角度从指令隔离模板调用控制器fn

2 个答案: