Angular:寻找有关自定义指令语法的解释 [英] Angular: Looking for an explanation on custom directive syntax

问题描述

我复制了一个自定义指令，该指令监视更改在表单文件输入中.

I copied a custom directive that watches for changes on form file inputs.

angular.module('customDirective', [])
.directive('ngFileInputChange', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var onChangeHandler = scope.$eval(attrs.ngFileInputChange);
            element.bind('change', onChangeHandler);
        }
    };
});

然后我像这样在模板中使用它:

Then I use it in the template like so:

<input ng-model="vm.image" ng-file-input-change="vm.base64Test" ...>

这很好用.

但是，这不起作用:

<input ng-model="vm.image" ng-file-input-change="vm.base64Test()" ...>

注意base64Test()末尾的().对于通用ng-click，括号是很好的，甚至是必需的(我还要如何将参数传递给函数?)，但是对于自定义指令，括号会导致错误.

Note the () at the end of base64Test(). With a generic ng-click, the parenthesis are fine, or even required (how else would I pass arguments to the function?) but with the custom directive, parenthesis cause an error.

我对scope.$eval(attrs.ngFileInputChange)的实际用途只有一个模糊的了解，所以也许我可以对此做些改变?

I only have a vague understanding of what scope.$eval(attrs.ngFileInputChange) is actually doing, so maybe I could make some change in that?

我还应该补充一点，我需要访问一些范围变量.例如，如果我不必使用custom指令，则可以在控制器中编写如下代码:

I should also add that I need access to some scope variables. For example, if I didn't have to use the custom directive, I would write something like this in my controller:

vm.base64Test(associatedData){
    console.log(associatedData);    
}

然后:

<input ng-change("vm.base64Test(vm.associatedData)">

但是ng-change不会监视文件输入内容，并且custom指令不允许参数(事件除外)，所以我陷入了困境.

But ng-change doesn't watch file input contents and the custom directive doesn't allow arguments (other than event), so I'm stuck.

推荐答案

首先，如果您打算从指令的 API 调用方法(可以这么说)，则需要对其进行识别作为回调:

Firstly, if you're planning on calling a method from a directive's API (so to speak), you need to identify it as a callback:

scope: {
    'onChange': '&ngFileInputChange'
}

这仅表示您已定义/公开了一种触发scope.onChange时声明回调的方法.这也意味着您不需要$parse或$eval，因为隔离范围可以为您处理.

This simply means you're defined/exposing a way to declare a callback when the scope.onChange gets triggered. It also means you don't need to $parse or $eval since the isolate scope can handle that for you.

接下来，您可以像执行操作一样触发该回调:

Next you can trigger that callback much like you're already doing:

element.bind('change', function(evt){
    $scope.$apply(function(){
        var payload = { $data:<whatever-you-pull-from-your-file-change-evt> }
        $scope.onChange(payload)
    }) 
});

要注意的一件事是，我正在$scope.$apply中调用回调.由于您正在侦听非角度事件(例如onChange)，因此您需要通知角度在$digest周期之外发生了更改.

One thing to note is that I'm calling the callback within the $scope.$apply. Because you're listening on non-angular events (e.g. onChange), you need to notify angular a change has occurred outside of the $digest cycle.

在已声明指令的位置，在实际的回调(可能在视图控制器中定义)中，您可以将有效负载传递给方法，如下所示:

Where you've declared your directive, in your actual callback (probably defined on your view controller) you can pass the payload to the method like so:

<input ng-file-input-change="vm.doSomething($data)">

这篇关于Angular:寻找有关自定义指令语法的解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！