在ng视图中改变ng视图的内容。

Good Day,

美好的一天,

I'm trying to create an SPA with Angular. Here is my index.html page:

我想做一个有棱角的SPA。这是我的指数。html页面:

<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
    <meta charset="UTF-8">
    <title>Online</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/mystyle.css">
    <base href="/Client/">
</head>
<body ng-controller="mainController">

<div class="container"> <!--- This is the box login  -->
    <div ng-view></div>
</div>

<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>

and here is app.js:

这里是app.js:

var onlineApp = angular.module('onlineApp', ['ngRoute']);

onlineApp.controller('mainController', function($scope) {
    $scope.message = 'Test Message';
});

onlineApp.controller('signupController', function($scope) {
    $scope.message = 'Sign up Message';
});

onlineApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        .when('/signup', {
            templateUrl: 'pages/signup.html',
            controller: 'signupController'
        })
        .otherwise({
            redirectTo: '/'
        });

        // use the HTML 5 History API
        $locationProvider.html5Mode(true);
});

My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.

我的问题是:在ng-view (home.html)的内容中，我有一个按钮。当我单击按钮时，我想要进入路由处理程序中定义的注册页面，但它不工作。我认为问题在于ng-view的“内部”。

EDIT: Here's a snippet of pages/home.html:

编辑:这是页面/主页的一个片段。

<div class="pull-right col-md-4">
    <label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
    <a id="btn-create" class="btn btn-primary" href="#signup" >
    Create Account
    </a>
</div>

When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html END EDIT:

当我点击按钮时，我想要页面/主页的内容。将html替换为页面/注册的内容。html编辑:

All of the examples I see of ng-view being used is when the links are outside of the ng-view.

我看到的使用ng-view的所有示例都是在ng-view之外的链接。

Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.

当我在ng-view中时，我可以更改ng-view的内容吗?或者有什么项目可以让我这么做。

TIA,

蒂雅,

coson

2 个解决方案

#1

you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)

您只需更改浏览器的位置就可以更改路由。我不太理解您的问题，您可能需要对它进行重新描述，或者再发布一些代码(从您的ng-view中)

potentially either a link of the form

可能是表单的链接

<a href="#/signup">Click me to switch</a>

or a manual location change with the $location service (inject it to your controller)

或使用$location服务进行手动位置更改(将其注入控制器)

$location.path("/signup");

should do the job. im not sure what you mean by links inside and outside of ng-view.

应该做这项工作。我不知道你所说的ng-view内外的链接是什么意思。

#2

The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.

使用ui-router的好处是，您可以将视图更改视为简单的页面重定向。例如，您可以使用一个锚标记将浏览器重定向到指定的url, ui-router会在页面刷新之前捕捉到这一点，并在不刷新页面的情况下更新ui-view。

<a href="#/signup">Click this link to go to signup.</a>

#1