Caleb Prenger Caleb Prenger - 4 months ago 10
AngularJS Question

Angular routeProvider and passing scopes

I am using routeProvider to create deep linking in my app. My issue is I need to have multiple levels. So lets say i have a products page the link would be:

http://example.com/#/products

$scope.products contains all of the products. Once clicked on the product, I need to be able to keep $scope.products and change the URL to http://example.com/#/products/1. the '/1' being the id of the product.

Answer

on your products controller create a function and call it to navigate to the edit page http://example.com/#/products something like this...

$scope.edit = function (data) {
        $window.location.href = '#/Products/Edit' + '?id=' + data.id;
    };

on your edit controller call $routeParams and load the object from your api, as it might have changed

function loadProduct()
    {
        productEditFactory.getProduct($routeParams.id).then(function (response) {
            $scope.product = response.data;
        }, function (response) {

        });
    }

    if ($routeParams.id)
    {
        loadProduct();
    }
    else {
        $scope.editMode = false;
    }

you also need to update your $routeProvider definition with something like this...

.when('/Product/Edit', {
        templateUrl: function (params) { return 'Products/Edit?id=' + params.id ; }
    })
Comments