4

我有一个简单的单页应用程序，可以在上面显示图像。

在第一次加载页面是空白的，人们添加了他们自己的图像，但是如果他们然后返回到带有保存在 url 中的 id 的页面，那么我希望页面获取以前的模型。

现在我之前使用 routeProvider 的所有尝试都失败了，除非我将 ng-view 放在页面中的某个位置。但这会影响 ng-view 范围内的范围。

基本上，我需要在页面上做出不同的响应，具体取决于 url 中是否有 id，但我没有更改视图，我需要从路由参数中获取 id。

所以我只是想知道你们将如何做这件事，因为我似乎在吠叫错误的树！任何帮助将非常感激。

4

4 回答 4

8

这是使用标准 routeProvider 设置和一个控制器处理带和不带 id 的 url 的一种方法：

JS：

var app = angular.module('plunker', []);

app.config(function($routeProvider){
  return $routeProvider
    .when('/', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .when('/:id', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .otherwise({ redirectTo: '/' });
});

app.controller('HomeController',
    [
      '$scope',
      '$routeParams',
      function($scope, $routeParams) {
        if($routeParams.id){
          $scope.id = $routeParams.id;
          // handle scenario when there is an id in URL
          return;
        }

        // handle scenario when there is no id
        $scope.id = 'no ID!!';
      }
    ]
  );

Plunker

这是另一种方式，不使用 ng-view 并依赖 $location 服务：

var app = angular.module('plunker', []);

app.config(
    ['$locationProvider',
      function($locationProvider) {
        $locationProvider.html5Mode(true);
      }
    ]
  );

app.controller('HomeController',
    [
      '$scope',
      '$location',
      function($scope, $location) {

        $scope.$watch(function(){
            return $location.hash();
          },
          function(id){
            $scope.id = id;
          }
        );

        $scope.$watch('id', function(id){
          if(id){
            // handle scenario when there's id available
            return;
          }
          // handle scenario when there is no id
        });

      }
    ]
  );

Plunker

于 2013-03-11T10:24:01.847 回答
2

这个 plunker$route通过在应用程序运行块中添加作为依赖项来启动 $route 服务。这里描述了这个想法。

angular.module('myApp', ['myApp.controllers'])
  .config(function($routeProvider) {
    return $routeProvider.when("/", {
      controller: 'firstCtrl'
    }).when("/numbers/:number", {
      controller: 'secondCtrl'
    });
  }).run(function($route) {});

angular.module("myApp.controllers", [])
  .controller("firstCtrl", function($scope) {
    $scope.numbers = [1, 2, 3];
  })
  .controller("secondCtrl", function($scope,$routeParams, $rootScope, $location) {
    return $rootScope.$on("$routeChangeSuccess", function(event, current) {
      $scope.current_path = $location.$$path;
      $scope.number = $routeParams['number'];
    });
  });
于 2013-07-26T22:50:22.657 回答
0

你可以做一些类似于 Ben Nadel 建议的事情。那就是使用 ng-switch 并在决定与 ng-include 结合使用的模板时为键提供哈希值。这样，当您更改为不同的 url 路径时，您会监听该更改，更新模型并启动新的包含/部分。

Ben Nadel - AngularJS 的嵌套视图、路由和深度链接

于 2013-09-23T17:33:23.957 回答
0

您始终可以定义自己的 url 解析器。创建服务，然后在您想要的时间和地点使用。

angular.module('app').service('urlParser', function(){
    this.parse = function(url){
        var query = url.split('?')
        if (url.length == 1){ return {} } //it means it has no parameters
        else{
            var paramsArray = query.split('&')
            var params = {} //this is going to be your return object
            var i;
            for ( i=0; i < paramsArray.length; i++ ){
                var arr = paramsArray[i].split('=')
                var param = arr[0]
                var value;
                //check if is set with some value
                if( arr.length == 1 )
                    value = null
                else
                    value = arr[1]
                obj[param] = value
            }
            return obj;
        }
    }
})

您将从控制器调用它作为服务。服务名称：urlParser 方法名称：parse(:string)

示例：
var url = " http://www.yourwebsite.com/yourroute?page=1&user=1000 "
var params = urlParser.parse(url)
params.page //给你 1
params.user //给你 1000

希望这有帮助

于 2016-02-10T19:48:04.033 回答