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

【问题标题】：How to call controller function from directives如何从指令中调用控制器函数
【发布时间】：2015-12-08 03:48:03
【问题描述】：

我正在使用 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()

【问题讨论】：

标签： jquery angularjs angular-directive

【解决方案1】：

由于您可能需要在页面上多次使用它，在这种情况下，当您想在每个 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();
                    })

                });
            }
        };
    });

【讨论】：

标记示例中仍然有on-click；应该是on-change。
@JackA。谢谢队友..我忘记了要更改的属性

【解决方案2】：

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

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

【讨论】：

调用控制器方法后..你需要手动运行digest循环才能看到效果..