Angular JS：在 ng-view 中加载自定义 javascript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29145450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS: load custom javascript file in ng-view
提问by Harmeet Singh Taara
I am using Angular Jsfor front-end of my sample, created a template and loaded views dynamically according to requirement. I am using angular, jqueryand cusotm jsfor my sample application. My templates worked fine and basic structure is as follows:
我正在使用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>
When the application runs, all my script and style-sheets are loaded successfully. But in my custom-function.js, I am using, elements idand classesfor performing some work. When the custom-function.jsloaded there are no document structure is defined, because the document is loaded dynamically using <div ng-view></div>.
当应用程序运行时，我所有的脚本和样式表都已成功加载。但是在 my 中custom-function.js，我正在使用元素id并classes执行一些工作。当custom-function.js加载没有文件结构被定义，因为文档是使用动态加载<div ng-view></div>。
I am also trying to include <script src='lib/angularjs/custom-function.js' type="text/javascript"></script>in my document, which is dynamically loaded by angular, but custom-function.jsfunction is not running.
我还尝试将其包含<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>在我的文档中，该文档由 angular 动态加载，但 custom-function.js功能未运行。
I am new in angular, I searched google, but still not find any appropriate solution. how could I solve this?
我是 angular 的新手，我搜索了谷歌，但仍然没有找到任何合适的解决方案。我怎么能解决这个问题？
回答by nerezo
With helps of ngRoute a template can be loaded which is containing a script tag which includes the js file contains javascript codes that we wanted to run.
在 ngRoute 的帮助下，可以加载包含脚本标签的模板，其中包含我们想要运行的 js 文件的 javascript 代码。
Please take a look the below example for usage:
请看下面的使用示例：
回答by shermi
This sample might help you to find some solution using 'ngRoute' module to load what you want to show in your 'ng-view' you can give your instructions in .js file.
此示例可能会帮助您找到一些解决方案，使用“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-->
yourinstruction.js file
yourinstruction.js 文件
router.controller('test',function ($scope) {
<!--your instructions-->
})
});
回答by Rochadsouza
You can solve this issue using '$viewContentLoaded' as shown in this tutorial: http://www.aleaiactaest.ch/2012/06/28/angular-js-and-dom-readyness-for-jquery/
您可以使用本教程中所示的“$viewContentLoaded”解决此问题：http: //www.aleaiactaest.ch/2012/06/28/angular-js-and-dom-readyness-for-jquery/
Another way is by dependency injection (the Angular way). The first part of this tutorial show us how to include an external lib by using dependecy injection. http://www.ng-newsletter.com/posts/d3-on-angular.html
另一种方式是依赖注入（Angular 方式）。本教程的第一部分向我们展示了如何使用依赖注入来包含外部库。 http://www.ng-newsletter.com/posts/d3-on-angular.html
