Может кто-нибудь объяснить эту часть кода директивы angularjs?

Question

Я пришел из более строгих языков, таких как Java, C#, C++ и использовал этот код для чтения файла в textarea, не понимая, как он работает из-за проблемы времени. Теперь я пытаюсь изучить директивы, чтобы понять эту директиву, но мне трудно понять одну часть этого кода.

Это функция моего контроллера, которую я ожидаю получить. fileContent - это всего лишь строка текстов:

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

Это реализация директивы read file. Я ожидаю, что вызов будет displayFileContentFn(fileContents), но почему он вызывает функцию с совершенно разными параметрами (и разными параметрами)? здесь находится {'content: 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

Это как-то связано с угловым сервисом parse.

если вы свяжете атрибут на файл-изменения, как:

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

The 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 будет передано функции displayFileContent как contents, когда читатель закончит чтение.

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), где displayFileContentFn == onFileChange из HTML и contents == fileContents из функции JavaScript. Затем это выполняется.