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

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

这是我希望被调用的控制器函数。 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]); 
     }); 
    }

来源

2016-12-24 user3758745

您能否请您提供您的指令范围的一部分：范围：{} –

'作用域：false，' – user3758745

这与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函数。

来源

2016-12-24 03:57:45 MMhunter

谢谢，这个简化版本有助于清除它。 '{'contents'：fileContents}'中的'contents'必须与'displayFileContent（contents）'中的参数名称相匹配，对吗？或者它是否与其他地方的名字相匹配？我尝试过'虚拟'，但失败了。 – user3758745

是的，他们必须匹配。您可能认为angular提供的$ parse服务有点解析器将字符串表达式解析为真正的javascript代码。 – MMhunter

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

本质上，您正在向$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。然后执行。

来源

2016-12-24 04:00:51 Claies

谢谢，我感谢你的帮助。我的问题是为什么'displayFileContentFn（）'是用2个参数而不是1调用的。不在$ apply上。 – user3758745

它怎么可能？ 'displayFileContentFn（arg1，arg2）'被传递给'apply'，此时它已经有2个参数。它所做的只是调用一个已经有2个参数的函数，不是吗？ – user3758745

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

回答

相关问题