在AngularJS中，如何在视图改变时加载脚本?

In AngularJS how can I load scripts when the View changes?

本文关键字：加载 脚本 改变 AngularJS 视图      更新时间：2023-09-26

在AngularJS中，它可以使用ng-view路由页面的一部分。这对于较小的项目来说确实很好，但随着项目变大，由于无法在script标签中加载脚本，因此无法很好地扩展。我看过一些其他的帖子，但我不能得到一个解决方案的工作。我能让它工作的唯一方法(我认为这是一个hack，不工作的方式，我想它)是如果我包括所有的脚本在顶部的基础Index.html。

我想要的是当视图改变有Javascript文件，在视图的头部被加载，被加载在那一点，因为他们将在那一点实际使用，而不必在应用程序的开始预加载他们。

http://plnkr.co/edit/7LMv0j2sAcjigPuW7ryv?p =

预览

在演示项目中，Index.html调用console.log命令，但我无法让page1或page2调用log命令。如有任何帮助，我将不胜感激。

我使用的是Angular 1.3.0 Beta 11

2件事，在你看来，你不需要写<html>或<body>标签，你已经在你的主页上有了这些。您应该看到该视图是主页面的一部分。

其次，要向视图中添加javascript，你需要向视图中添加一个控制器，如下所示: 
.config(function ($routeProvider) {
    $routeProvider
      .when('/page1', {
        templateUrl: 'page1.html',
        controller: function ($log) {
          $log.info('page 1');
        }
      })
      .when('/page2', {
        templateUrl: 'page2.html',
        controller: function ($log) {
          $log.info('page 2');
        }
      });
});

也可以像这样向视图添加控制器:

var app = angular.module('routeApp', ['ngRoute']) 
.config(function ($routeProvider) {
    $routeProvider
      .when('/page1', {
       templateUrl: 'page1.html',
       controller: function ($log) {
          $log.info('page 1');
        }
      })
      .when('/page2', {
           templateUrl: 'page2.html',
           controller: 'ViewController'
      });
});
app.controller('ViewController', function ($log) {
  $log.info('page 2');
})

我更新了你的plunker: Here

相关文章：