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?

我还应该补充一点，我需要访问一些范围变量.例如，如果我不必使用自定义指令，我会在我的控制器中编写如下内容:

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 不观察文件输入内容，并且自定义指令不允许参数(事件除外)，所以我被卡住了.

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)，所以您需要通知 angular 在 $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屋！