如何使用动态 ng-include 和 AngularJS 加载数据，每个页面都有正确的控制器？答案

【问题标题】：How to load data using dynamic ng-include with AngularJS with correct controller for each page?如何使用动态 ng-include 和 AngularJS 加载数据，每个页面都有正确的控制器？
【发布时间】：2018-03-03 21:47:33
【问题描述】：

我意识到这不是一个全新的问题，但经过几天的尝试，我似乎并没有从根本上理解某些东西，尽管我进行了广泛的搜索，因为我无法让我的应用程序运行。

我有一个 Web 应用程序，其中一个侧边 nav 和一个主 div 在中心。我正在使用ng-include 根据单击的nav 来填充主div。最初我使用的是ng-show，但由于每个页面上的数据太多，我不想加载所有侧面nav 选项。然后我改用ng-include，效果很好。但是，当单击一侧 nav 时，我现在遇到了两种方式绑定和加载 init() 函数的问题。我试图保持简单，因为这是我第一个使用 AngularJS 的应用程序，而且我必须使用 AngularJS，因为正在查看的一些页面已经存在，它们自己的控制器和页面功能齐全。因为许多页面已经在运行，我只想显示现有页面中的 HTML 并链接到该页面的正确控制器。作为一种临时解决方案，我已从各种控制器中获取所有代码并将它们粘贴在一个控制器中。但是，这会产生其他问题，需要我更改大量代码，因此我更希望每个页面都有自己的控制器。

因此，使用ng-include 的正确方法是什么，可以让我加载HTML 页面，将其链接到适当的控制器，然后运行某种init() 和所有ng-model零件还在工作吗？

很可能我做错的不止一件事。我的实际应用程序有很多数据并且很大。因此，我提取了其中很小的一部分，并输入了以下示例来展示我想要完成的工作以及我尝试过的最新事情。

index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>PL Releasing</title>
        <script type="text/javascript" src="assets/js/jquery-1.11.0.js"></script>   
        <script type="text/javascript" src="assets/js/angular.min.js"></script>
        <script type="text/javascript" src="assets/js/app.js"></script>
    </head>
    <body  ng-app="indexApp" ng-controller="indexController" style="width: 100%">
        <div>
            <div>               
                <a ng-click="showpage('page1')">PAGE1</a>
                <a ng-click="showpage('page2')">PAGE2</a>               
            </div>
            <div ng-include="templateURL">
            </div>
        </div>
    </body>
</html>

app.js

var app = angular.module('indexApp', []);

app.controller('indexController', function($scope) {

    //index.html
    $scope.showpage = function(pageName) {

        switch(pageName) {
            case "page1":
                $scope.templateURL = '/assets/pages/page1.html';                
                break
            case "page2":
                $scope.templateURL = '/assets/pages/page2.html';                
                break
            default:
                $scope.templateURL = ''
                console.log(pageName)   
        }       
    }   
})

app.controller('page1Controller', function($scope) {

    $scope.ListData = []

    $scope.populatePage1 = function() {
        $("#data").html('loaded 1')
        $scope.getPage1Data()
        //POPULATE <select> AND OTHER STATIC DATA
    }

    $scope.page1Init = function() {
        $scope.populatePage1()
        //RUN OTHER INIT FUNCTIONS HERE
    }

    $scope.getPage1Data = function() {
        $http.get("http://127.0.01:9090/getListData?queryName=page1Data")
            .then (function(resp) {
                $scope.ListData = resp.data;            
            });
    }

})

app.controller('page2Controller', function($scope) {

    $scope.populatePage1 = function() {
        $("#data").html('loaded 2')
        $scope.getPage1Data()
    }

    $scope.page1Init = function() {
        $scope.populatePage2()
        //RUN OTHER INIT FUNCTIONS HERE
    }

    $scope.getPage2Data = function() {
        $http.get("http://127.0.01:9090/getListData?queryName=page2Data")
            .then (function(resp) {
                $scope.ListData = resp.data;            
            });
    }

})

page1.html

<div ng-controller="page1.html" onload="page1init()">
    <p>THIS IS PAGE 1</p>
    <input type="text" ng-model="page1Input" placeholder="Enter data"/>
    <br>
    <div>{{page1Input}}</div>
    <br>
    <div id="data"></div>
    <select style="width: 100px;">
        <option value=""></option>
        <option ng-repeat="pjt in ListData" value="{{pjt.id}}">{{pjt.name}}</option>
    </select>
</div>

编辑： 这是我创建尝试使用 ng-route 的 Plunker 的链接。

【问题讨论】：

为什么不能尝试使用路由？ ngRoute 或 ui-router?
不是我“不能”，而是我没有成功。我可以发布我尝试过的代码，但我无法使用该方法开始工作，也许你可以指出我的错误。将该代码作为 EDIT 添加到原始问题中是否正确？
您可以尝试设置一个小提琴并将其添加到您的原始问题或提出不同的问题。以激进的方式编辑帖子似乎并不好，因为您已经在此处发布了答案。

标签： angularjs angularjs-ng-include

【解决方案1】：

你可以使用AngularJS ngRoute：

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});

Here's plnkr 中的示例演示。

【讨论】：

感谢您的回答。但是，我无法让它在我添加到问题中的 Plunker 中工作。

【解决方案2】：

你展示了使用像 ngRoute 这样的路由库。

【讨论】：