Question

我意识到这不是一个全新的问题，但经过几天试图让这个工作起来我似乎根本不理解一些事情，尽管我做了大量的搜索，因为我无法让我的应用程序工作。

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

因此，以一种允许我加载HTML页面，将其链接到适当的控制器然后运行某种ng-include的方式使用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的链接。

Answer 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中的示例演示。

Answer 2

您显示使用路由库，如ngRoute。

如何使用动态ng-include加载AngularJS并为每个页面添加正确的控制器？

2 个答案: