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

Posted 2023-02-22

【中文标题】如何从指令中调用控制器函数

【英文标题】：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()

【参考方案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循环才能看到效果..