如何从指令中调用控制器函数

Question

我正在使用 Angularjs，我想从指令中调用控制器函数，但它不起作用，请帮忙。

下面是我的代码

app.directive('datetimez', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datetimepicker({
                dateFormat: 'dd-mm-yyyy'
            }).on('changeDate', function (e) {
                changedate();
                //ngModelCtrl.$setViewValue(e.date);
                //scope.$apply();
            });
        }
    };
});

控制器：

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

    $scope.changedate = function () {
        alert('Hi#####fromdate');
    }
});

HTML:

<div id="date" class="input-append" datetimez ng-model="var1">
    <input data-format="dd-MM-yyyy" type="text" id="input1" data-date-start-date="+0d" name="input1"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

我想从指令函数

调用changedate()

Answer 1

如果指令是在控制器范围内（在模板中）声明的，您只需引用指令继承的 scope 对象上的方法，作为 link 方法的参数给出：

link: function (scope, element, attrs, ngModelCtrl) {
    element.datetimepicker({
        dateFormat: 'dd-mm-yyyy'
    }).on('changeDate', function (e) {
        scope.changedate();
//      ^^^^^
    });
}

Answer 2

因为你可能会遇到需要在页面上多次使用它的情况，在这种情况下，当你想在每个 datepicker 上调用不同的方法时，从指令调用控制器方法会变得混乱.

所以我建议您在那里使用隔离的 scope 来制作可重用的组件。为此，您需要添加 scope: { onChange: '&' },，这将使使用 & 的指令可用（表示要执行的表达式）通过在将提供控制器方法契约的指令元素上添加 on-change 属性.

标记

<div id="date" class="input-append" datetimez ng-model="var1" on-change="changedate()">

指令

   app.directive('datetimez', function () {
        return {
            restrict: 'A',
            scope: {
               onChange: '&'
            },
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                element.datetimepicker({
                    dateFormat: 'dd-mm-yyyy'
                }).on('changeDate', function (e) {
                    //to run digest cycle to..
                    scope.$apply(function(){
                       scope.onChange();
                    })

                });
            }
        };
    });

如何从指令中调用控制器函数

How to call controller function from directives

jquery

angularjs

angular-directive