繁体   English   中英

Angular JS:在ng-view中加载自定义JavaScript文件

[英]Angular JS: load custom javascript file in ng-view

我将Angular Js用于示例的前端,创建了模板并根据要求动态加载视图。 我在示例应用程序中使用angularjquerycusotm 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 ,我正在使用元素idclasses来执行某些工作。 加载custom-function.js时,未定义文档结构,因为使用<div ng-view></div>动态加载了文档。

我还试图在<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>包含<script src='lib/angularjs/custom-function.js' type="text/javascript"></script> ,该文件是由angular但custom-function.js动态加载的功能未运行。

我是新手,我搜索了google,但仍然找不到任何合适的解决方案。 我该如何解决?

借助ngRoute,可以加载包含脚本标签的模板,该脚本标签包含js文件,该文件包含我们要运行的javascript代码。

请看下面的用法示例:

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

该示例可能会帮助您使用“ 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文件

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM