Question

<nav>
<ul class="list">
    <li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize">
    <span>{{product}}</span>
        <a href="#getAttributes/{{product}}/{{code}}/{{name}}/{{hierName}}">
        {{product.prd_name}}

        </a>
    </li>
</ul>
</nav>

我按上述方式呼叫ng-route。

myApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/getAttributes/:product/:code/:name/:hierName', {
    templateUrl : 'view/attributes.jsp',
    controller : 'attributeController'
}).otherwise({
    redirectTo : '/mainMenu'
});
} ]);

产品是JSON对象。如果产品对象包含＆＃34; /＆＃34;则上述代码路由到否则字符。关于如何解决它的任何想法。

Answer 1

第一种方法：使用ng-click将模型存储在服务中然后转到位置

首先在列表项中添加ng-click，在控制器上调用get属性，并注意删除href。

<nav>
    <ul class="list">
        <li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize" ng-click="getAttributes(product)">
            <span>{{product}}</span>
                <a href="">{{product.prd_name}}</a>
        </li>
    </ul>
</nav>

接下来，将您的路线重新配置为简单/ getAttributes

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController'
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

在您的控制器中，添加一个名为getAttributes的方法，该方法将由上述ng-click调用。它将调用服务并使用其setModel函数来持久保存单击的模型。最后，它将路由getAttributes。

myApp.controller('someController', [
    '$scope', '$location', 'someService', function($scope, $location, someService) {
        $scope.getAttributes = function(model) {
            someService.setModel(model);
            $location.url('getAttributes');
        };
    }
]);

属性控制器将调用相同的服务并使用其getModel方法来设置模型。

myApp.controller('attributeController', [
    '$scope', 'someService', function($scope, someService) {
        $scope.model = someService.getModel();
    }
]);

该服务需要如下内容：

myApp.service('someService', function() {
    var model;

    return {
        getModel: function() {
            return model;
        },
        setModel: function(newModel) {
            model = newModel;
        }
    };
});

这种方法仅适用于您永远不会以任何其他方式路由到getAttributes的情况。可以采用更灵活的第二种方法。

第二种方法：使用Resolve获取模型，在服务中设置然后在控制器中加载

将href修改为ng-href，并将其设置为getAttribute / 123或其他类似物。

    <nav>
        <ul class="list">
            <li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize">
                <span>{{product}}</span>
                <a ng-href="/getAttributes/{{product.id}}">{{product.prd_name}}</a>
            </li>
        </ul>
    </nav>

修改您的路线以接受产品ID，如下所示。此外，添加解析对象。该对象将调用someService，后者将调用您的服务器，检索products属性并将模型变量设置为等于结果。

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/:id', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController',
                resolve: {
                    getModel: function(someService) {
                        return someService.get();
                    }
                }
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

如前所述，该服务将在/ getAttributes / id路由上获取传递的ID，并使用它来调用服务器。另一种方法是让服务为此调用存储库。最终结果是相同的：将模型变量设置为等于对服务器的调用结果。

myApp.service('someService', [
    '$http', function($http) {
        var model;

        return {
            get: function(id) {
                return $http.get('api/attribute/' + id).then(function(response) {
                    model = response.data;
                });
            },
            getModel: function() {
                return model;
            },
            setModel: function(newModel) {
                model = newModel;
            }
        };
    }
]);

最后，您的attributeController的行为与第一个示例相同。它将$ scope.model设置为等于someService.getModel（），从而提供产品属性。</ p>

此方法的优势在于，您的路线可能会在应用中的任何位置与您的路径深度链接，而不会出现问题。

ng-route-具有特殊字符的参数

1 个答案: