有人可以解释这段angularjs指令代码吗？

Question

我来自Java，C＃，C++等更严格的语言，并且已经使用此代码将文件读入textarea，但由于时间问题而无法理解其工作原理。现在我试图学习指令，以便理解这条指令，但是我很难理解这段代码的一部分。

这是我希望被调用的控制器函数。 fileContent只是一串文本：

self.displayFileContent = function(contents) { 
    self.fileContent = contents; 
}; 

这是读取文件指令的实现。我期待的呼叫是displayFileContentFn(fileContents)，但为什么它调用完全不同的参数（和不同数量的参数）的功能？是{'contents：filecontents}一个javascript对象吗？

scope: false, 
link: function(scope, element, attrs) { 
     element.bind('change', function(e) { 

      var displayFileContentFn = $parse(attrs.onFileChange); 
      var reader = new FileReader(); 

      reader.onload = function() { 
       var fileContents = reader.result; 

       scope.$apply(function() { 
        displayFileContentFn(scope, { 
         'contents' : fileContents 
        }); 
       }); 
      }; 
      reader.readAsText(element[0].files[0]); 
     }); 
    } 

Answer 1

这与angular的$ parse服务有关。

，如果你绑定的文件，改变属性，如：

on-file-change='displayFileContent(content)' 

的displayFileContenFn定义为：

var displayFileContentFn = $parse(attrs.onFileChange); 

实际上是在给像（真正的代码要复杂得多这里我只是简化它，使它容易理解）：

var displayFileContentFn = function(scope,parameters){ 
    var contents = parameters['contents']; 
    scope.displayFileContent(contents); 
} 

所以这里这里

种

displayFileContentFn(scope, { 
         'contents' : fileContents 
        }); 

装置，其使用scope执行displayFileContent（因为我们它势必对文件变化属性），传递fileContents作为contents参数（我们宣称它在属性作为第一个参数） 。

这样，当阅读器完成阅读时，fileContents读取将作为contents传递给displayFileContent函数。

Answer 2

为了理解这里发生了什么，您必须了解一下角度生命周期的工作原理。

本质上，您正在向$scope.$apply提供表达式而不是函数。该表达式使用$scope.$eval执行，允许使用提供的scope对表达式进行评估。 （在这种情况下，scope由指令定义）在对表达式进行求值后，将处理任何异常处理，然后可以触发任何手表。

的$应用伪代码（）

function $apply(expr) { 
    try { 
    return $eval(expr); 
    } catch (e) { 
    $exceptionHandler(e); 
    } finally { 
    $root.$digest(); 
    } 
} 

在你的功能的情况下，如果你的HTML是on-file-change='displayFileContent(contents)'，$scope.$apply()正在采取

displayFileContentFn(scope, { 
    'contents' : fileContents 
}); 

并取回displayFileContent(fileContents)，其中来自HTML的displayFileContentFn == onFileChange和来自JavaScript功能的contents == fileContents。然后执行。