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

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

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

Angular invoke controller fn from directive isolated template

angularjs

angular-directive