AngularJS: Referencing DOM nodes in Angular expressions is disallowed
<p>Trying to bind a custom <strong>onchange</strong> handler to the input file element. getting the following error:</p>

<p><strong>Referencing DOM nodes in Angular expressions is disallowed! Expression: setRuleFile(element</strong></p>

<p>Is there any way to work around it?</p>

<p>Thanks. Here are the relevant excerpts from my code.</p>

<p>html:</p>

<pre><code>&lt;input type="file" on-select-file="setRuleFile(element)"/&gt;
</code></pre>

<p>controller:</p>

<pre><code>$scope.setRuleFile = function(element) {
    // Extract selected file name
    var pathArray = element.value.split('\\');
    $scope.data.ruleFileName = pathArray[pathArray.length - 1];  // take only name without path
    $scope.data.ruleFile = element;
}
</code></pre>

<p>directive:</p>

<pre><code>angular.module('myModule').directive('onSelectFile', function ($parse) {
    // Triggered when user selects file
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // Get callback into variable and bind it to onchange handler
            onSelectFileFunc = $parse(attrs.onSelectFile);
//console.log(onSelectFileFunc(scope, {'element': element}));
            element.bind('change', function() { onSelectFileFunc(scope, {'element': element}); } );
        }
    };
})
</code></pre>