Question

我正在尝试创建一个网页。当用户登录时，视图中会打开一个新的html页面（“dashboard.html”）。这个“dashboard.html”包含一些链接（指向其他html页面的链接）。当用户点击它们时，应该打开一个新的html（比如“page_3.html”）页面，其中包含controller.this“page_3.html”中的数据。没有从controller获取数据.Below是我的代码。

<!-- controller.js   -->
    var app = angular.module('myApp',[ 'ngRoute' ]);
    app.config(function($routeProvider){ 
       $routeProvider
       .when('/',{ 
          templateUrl: 'login.html' 
       })
       .when('/dashboard',{
           templateUrl: 'dashboard.html' 
    })
       .when('/page_3',{ 
          templateUrl: 'page_3.html' 
       })
       .otherwise({
           redirectTo : '/'
       });
        
    });


    app.controller('app', function($scope, $location){
    $scope.item = "test";
        $scope.submit = function(){
                $location.path('/dashboard');
            }   
        };
    });

<!DOCTYPE html>
    <html>
        <head>
            <title>Project</title>
            <script src="angular.js"></script>
            <script src="angular-route.js"></script>
            <script src="controller.js"></script>
        </head>
        <body ng-app= "myApp" ng-controller="app">
            <div ng-view></div>   
        </body>
    </html>

    <!-- below is login.html page -->

    <div ng-controller="app">      
    <form action="/"> 
         <button type="button" ng-click="submit()">Login</button>
            </form>
    </div>

    <!-- below is my dashboard.html page -->
    <div ng-controller="app">
      <h1>Page_3</h1>
            <div><a href='page_3.html'>page_3</a></div>
        </div>
      
      <!-- below is page_3.html page -->

    <div ng-controller="app">
    <p>{{item}}</p>
    </div>

结果：{{item}}

Answer 1

我建议避免使用ng-controller指令，而是使用路由器上的controller配置对象吗？

.when('/page_3',{ 
  templateUrl: 'page_3.html',
  controller: "app"
})

Answer 2

您的代码存在两个主要问题：

为/dashboard和/page_3

pushState via $locationProvider

解决了为/page_3配置路由但a标记指向/page_3.html

获得一个有效的例子：

添加基础代码
```
<base href="/">
```
通过config块中的locationProvider启用html5模式
```
$locationProvider.html5Mode(true);
```

修复dashboard.html中的路线

 <!-- below is dashboard.html page -->
 <div ng-controller="app">
    <h1>Page_3</h1>
        <div><a href='page_3.html'>page_3</a></div>
  </div>

Click here for the demo / jsbin.

其他/建议：正如Zack Briggs所建议的那样;在路由中使用控制器语法可以帮助您在路由器配置directives或components中提供更好的代码结构/设计。对于不断发展的项目而言，将所有内容放在一个地方通常也是一个坏主意。

无法从angularjs中的多个html页面中的控制器获取数据

2 个答案: