Angularjs - 加载我的模板组件时执行函数 javascript答案

【问题标题】：Angularjs - Execute function javascript when load my template componentAngularjs - 加载我的模板组件时执行函数 javascript
【发布时间】：2018-04-11 15:29:30
【问题描述】：

在我的 SPA 的 index.html 文件中，我声明了一个 javascript 函数：

<script>
function getData() {
//get data
}
</script>

反过来，从 Angular 组件的 HTML 模板中，我需要在加载该组件时访问该 javascript 函数（onload），但我必须从 html 模板中执行此操作，我无法从 typescript 控制器执行此操作.

例如，如果我想通过我的 html 模板中的“onclick”事件访问我的 index.html 的 javascript 函数，它可以完美运行，但我不知道该怎么做，将 javascript 函数执行为页面加载完毕。

<div id="data_main" onclick="getData();">Get Data</div> <!--working ok-->

指令 ng-init 不起作用，因为我无法传递 javascript 函数。

<div id="data_main" ng-init="getData();">Get Data</div> <!--not working ok-->

感谢您的帮助，

【问题讨论】：

没有特定的时刻可以将组件视为“已加载”，因为它可能包含异步操作。这完全针对您的情况。 我不能从打字稿控制器做到这一点 - 一个正确的方法是将这个逻辑移动到控制器。您无法从模板访问全局变量，而且这闻起来很糟糕，
是的，我知道，问题是我必须调用的函数，只有在从 html 文件定义的情况下才能正常工作，因为第三方的外部函数和来自控制器的代码打字稿无法正确编译。
这可能特定于您构建应用程序的方式，并且肯定有一种方法可以使其正确编译。异步初始化的一个丑陋的解决方法是将就绪事件侦听器$(() =>{...}) 甚至窗口加载事件侦听器放在 getData 中。

标签： javascript angularjs

【解决方案1】：

下面一行

<div id="data_main" ng-init="getData();">Get Data</div>

要求getData() 出现在附加的$scope 中。您需要先将函数分配给范围才能在模板中使用它。

在您的控制器中，注入 $window 并将函数分配给 $scope，如下所示：

angular.module('yourMod', [])
  .controller('yourCtrl', function($scope, $window) {
    $scope.getData = $window.getData;
  });

现在你可以像往常一样在模板中使用它了：

<div ng-controller="yourCtrl">
  <div id="data_main" ng-init="getData();">Get Data</div>
</div>

【讨论】：