Question

我有两个名为main.html和detail.html的html页面。单击main中的链接按钮时，我想打开详细信息页面以获取详细信息。 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>

位指示：

MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});

MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});

点击主页面中的链接按钮时，我只会看到一个文本{{a}}和我的网址：＆＃39; localhost / Main.html＆＃39;的按钮。我不想使用target = _self vs.如果我使用，当按下返回点击按钮时，主页面将重新加载。

你有什么建议吗？

谢谢！

Answer 1

看起来你正在混合使用jQuery Mobile和Angular表示法。

要在Angular中实现导航，您可以使用核心Angular服务$routeProvider。您必须为此包含ng-route模块。

以下是如何在您的模块上配置此内容的示例：

  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'
        });
    }]);

现在在您的html中，使用指令ng-view指定应包含模板的标记。

<body ng-app="app">
    <div ng-view>
    </div>
</body>

如何在AngularJS中实现页面导航？

1 个答案: