问题描述:

i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.

Main.html:

<body ng-app="MyApp" ng-controller="mainController">

<div data-role="page" data-theme="b">

<a ng-href="detail.html"></a>

</div>

</body>

detail.html:

<div data-role="page" data-theme="b" ng-controller="DetailContoller">

<button>{{a}}</button></div>

Contoller:

MyApp.controller("mainController", function ($scope, $http, OranService, $location) {

$scope.a = 5;

$scope.items = [];});

MyApp.controller('DetailController', function ($scope, OranService) {

$scope.a = 1;});

When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.

Do you have any suggestion?

Thanks!

网友答案:

Looks like you're mixing jQuery Mobile and Angular notation.

To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.

Here's an example of how to config this on your module:

  angular.module('app', ['ngRoute'])

  .config(['$routeProvider',
    function($routeProvider) {

      $routeProvider
        .when('/page1', {
          templateUrl: 'page1.html',
          controller: 'Page1Ctrl'
        })
        .when('/page2', {
          templateUrl: 'page2.html',
          controller: 'Page2Ctrl'
        })
        .otherwise({
          redirectTo: '/page1'
        });
    }]);

Now in your html, use the directive ng-view to specify the tag that should contain the template.

<body ng-app="app">
    <div ng-view>
    </div>
</body>
相关阅读:
Top