Question

我想动态地将菜单JavaScript文件和html添加到content.html，但它无法做到。

我创建了简单的例子

我尝试将“<script src="menu.js"></script>”移至menu.html

Answer 1

您的代码远离了使用angular编写单页应用程序的整个想法。我已经更新它，让您基本了解如何进行路由和共享模板以及使用控制器。

<强> HTML

<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="menu.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
    <script src="menu.js"></script>
    <script src="index.js"></script>
  </head>

  <body>
    <div id="menu" ng-include="'menu.html'"></div>
    <div ui-view></div>
  </body>

</html>

<强> JS

angular.element(document).ready(function() {
    angular.bootstrap(document, ["app"]);
});

angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);

var app = angular.module('app');

app.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      templateUrl: "first.html",
      controller: 'firstCtrl'
    })
    .state('second', {
      url: "/second",
      templateUrl: "second.html"
    })
});

app.controller('firstCtrl', ['$scope', function($scope) {
  $scope.page = "first";
}]);

//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);

function contentCtrl(shareData)
{
    shareData.currentPage = 0;
}

AngularJS动态加载模板和js文件

1 个答案: