Angular JS：在 ng-view 中加载自定义 javascript 文件答案

【问题标题】：Angular JS: load custom javascript file in ng-viewAngular JS：在 ng-view 中加载自定义 javascript 文件
【发布时间】：2015-03-19 13:08:42
【问题描述】：

我使用Angular Js 作为我的示例前端，创建了一个模板并根据要求动态加载视图。我在我的示例应用程序中使用angular、jquery 和cusotm js。我的模板运行良好，基本结构如下：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  ---------------- bootstap, css etc ----------- stylesheet include
  <script src='assets/js/angular.min.js' type="text/javascript"></script>
</head>

<body>
 <div ng-view></div>
</body>

-------------------- jquery, bootstrap ---------- javascript include
<script src='lib/angularjs/angular-route.js' type="text/javascript"></script>
<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>

当应用程序运行时，我的所有脚本和样式表都已成功加载。但是在我的custom-function.js 中，我正在使用元素id 和classes 来执行一些工作。当custom-function.js 加载时没有定义文档结构，因为文档是使用<div ng-view></div> 动态加载的。

我还尝试在我的文档中包含<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>，它是由角度动态加载的，但custom-function.js 函数没有运行。

我是 Angular 新手，我搜索了谷歌，但仍然没有找到任何合适的解决方案。我怎么能解决这个问题？

【问题讨论】：

你的 custom-function.js 应该是 Angular 内部的控制器、指令或服务，否则很难让它工作。您应该以编程的角度“翻译”您的 jquery 代码
你可以把相关的脚本标签<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>放到你在ng-view中加载的视图模板的末尾。
您好@nerezo，我们已经尝试过了，脚本已加载，但无法正常工作
@harmeet-singh-taara 你能提供一个关于你的自定义脚本中的代码的例子吗？
@nerezo 类似$(document).ready(function() { } 文档元素函数的方法。

标签： javascript jquery html angularjs dynamic-loading

【解决方案1】：

在 ngRoute 的帮助下，可以加载一个模板，该模板包含一个 script 标签，其中包含 js 文件包含我们想要运行的 javascript 代码。

请看下面的用法示例：

http://embed.plnkr.co/AonatjhKlPMaOG6vVWW1/preview

【讨论】：

感谢您的帮助，$(document).ready(function() { }) 函数工作正常，但我的元素事件未绑定。在搜索谷歌之后，大多数开发人员都说，使用$(window).load(function() { })而不是文档，因为你的元素没有正确加载，但是在文档功能中我也成功找到了元素对象。在我的custom js 文件中，当我使用$(window).load(function() { }) 时，这将不起作用。我该怎么做？
当我尝试访问alert($("#element)) 时，这是显示对象。但是当我尝试访问alert($("#element)[0]) 时，这是在$(document).ready(function() { }) 函数中显示element undefine。
嗨@HarmeetSinghTaara，我更新了上面的plnkr 脚本。我可以成功地从正文标记和其他加载的模板中选择一个字段。而且我还可以更改它们的值或样式并绑定方法。如我所见，您在 #element 之后忘记了选择器 alert($("#element)) 上的引号字符。
我面临的新问题是，当我的页面加载时，图像是从另一台服务器获取的，这需要时间。这就是为什么，我在$(document).ready(function() { }) 中的事件没有绑定。如果我将这些事件延迟，它们会正常工作。
@HarmeetSinghTaara 请看下面的动态事件绑定链接：stackoverflow.com/questions/8752321/…

【解决方案2】：

此示例可能会帮助您找到一些解决方案，使用“ngRoute”模块加载您想要在“ng-view”中显示的内容，您可以在 .js 文件中给出说明。

    <script src="yourinstruction.js"></script>

    </head>
    <body ng-app='base'>


    <div ng-view></div>

    <script>

   var router = angular.module('base', ['ngRoute']);

    router.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/home.html',controller:'test'
          }).otherwise({

            redirectTo: '/'
          });
      }]);


    </script>
    <!--other codes-->

你的instruction.js 文件

  router.controller('test',function ($scope) {
    <!--your instructions-->
     })
   });

【讨论】：

【解决方案3】：

您可以使用“$viewContentLoaded”解决此问题，如本教程所示： http://www.aleaiactaest.ch/2012/06/28/angular-js-and-dom-readyness-for-jquery/

另一种方式是依赖注入（Angular 方式）。本教程的第一部分向我们展示了如何使用依赖注入来包含外部库。 http://www.ng-newsletter.com/posts/d3-on-angular.html

【讨论】：