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

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

                });
            }
        };
    });

Answer 2

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

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

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

2 个答案: