วิธีเพิ่มสตริงข้อความค้นหาต่อท้าย URL ใน Angular ui-router

ฉันค่อนข้างใหม่กับ AngularJS ฉันใช้ ui-router และ node.js เป็นเซิร์ฟเวอร์ UI ของฉันสำหรับการเรียก API ไปยังเซิร์ฟเวอร์อื่น ขณะนี้ ฉันประสบปัญหาในการต่อท้ายสตริงข้อความค้นหาเข้ากับ URL โดยขึ้นอยู่กับอินพุตของผู้ใช้ (การเลือกแบบเลื่อนลง)

รหัสคอนโทรลเลอร์ AngularJS ของฉัน:

$scope.getResults = function() {
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};

บริการ AngularJS สำหรับฟังก์ชั่นข้างต้น:

app.factory('server', ['$http', function($http){
    return { 
        getResults : function(color, size) {
            var req = {};
            req.color = color;
            req.size = size;

            return $http({
                method: 'GET', 
                url: 'results',
                params : req
            });
        }
    }
}]);

ui-เราเตอร์ในเชิงมุม:

$stateProvider.state('home', {
    url: '/home',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{ 
       pageTitle: 'blah' 
    }
})

ใน Node.js ฉันมีเส้นทางของฉันดังนี้:

app.get("/results", function (req, res) {

    var api = 'some api call/' + req.query.color + '/' + req.query.size;

    request(api, function (error, response, api) {

        if (!error && response.statusCode == 200) {
            res.json({
                Color: req.query.color, 
                Size: req.query.size,
                Answer: api
            });
        }
    });
});

ฉันต้องการให้ URL ของเบราว์เซอร์เปลี่ยนจาก /home เป็น /home?color=Red&&size=Large

แน่นอนว่าฉันทำสิ่งนี้ไม่ถูกต้อง URL ของเบราว์เซอร์ไม่เป็นแบบไดนามิกในขณะนี้ โปรดแสดงวิธีการดำเนินการนี้อย่างถูกต้อง


person kevin_b    schedule 16.04.2016    source แหล่งที่มา


คำตอบ (1)


ใช้ตัวเลือก reloadOnSearch: false เพื่อหยุดการโหลดเส้นทางปัจจุบันซ้ำเมื่อมีการเปลี่ยนแปลงในพารามิเตอร์สถานะ

$stateProvider.state('home', {
    url: '/home?color&size',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{ 
       pageTitle: 'blah' 
    },
    reloadOnSearch: false //would not refresh state, for location changes.
})

ตัวควบคุม

$scope.getResults = function() {
    //change parameter of URL usingn $location.search.
    $location.search('color', $scope.myColor);
    $location.search('size', $scope.mySize);
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};
person Pankaj Parkar    schedule 16.04.2016
comment
@jebmarcus ดีใจที่ได้รู้ว่า ขอบคุณ :-) - person Pankaj Parkar; 17.04.2016
comment
@PankajParker แม้ว่า URL จะเปลี่ยนแปลงตามที่คาดไว้ แต่เมื่อฉันคัดลอก URL และวางลงในแท็บใหม่ เซิร์ฟเวอร์จะไม่ถูกเรียกเหมือนปกติ - person kevin_b; 17.04.2016
comment
มีวิธีแก้ไขไหม? - person kevin_b; 17.04.2016
comment
@jebmarcus ในการเรียกข้อมูลครั้งแรก รับพารามิเตอร์จากพารามิเตอร์สถานะเช่น $stateParams.color & $stateParams.size เพื่ออ่านพารามิเตอร์เหล่านั้น & ส่งผ่านการโทร ajax .. - person Pankaj Parkar; 17.04.2016
comment
@PankajParker ฉันสับสนเล็กน้อยเกี่ยวกับสิ่งที่คุณหมายถึงโดยการโทรข้อมูลครั้งแรก ฉันคิดว่าปัญหาที่นี่คือ URL ในขณะนี้เป็นเช่นนี้: localhost:3000/# /home?color=Red&size=Large แต่ฉันกำลังทำการคืน $http ฉันมี url: 'results' ไม่ใช่ 'home - person kevin_b; 17.04.2016
comment
@jebmarcus ฉันหมายถึงจะบอกว่าเมื่อสถานะของคุณโหลดแล้วคอนโทรลเลอร์สร้างอินสแตนซ์ด้วยสถานะนั้นในจุดเริ่มต้นของคอนโทรลเลอร์ทำ $scope.myColor = $stateParams.color & $scope.mySize = $stateParams.size ดังนั้นในขณะที่สร้างอาแจ็กซ์คุณไม่จำเป็นต้องกังวลเกี่ยวกับการส่งพารามิเตอร์ - person Pankaj Parkar; 17.04.2016
comment
@PankajParker ฉันลองแล้วและตอนนี้ยังคงมีปัญหาอยู่ url ไม่ได้ทำการเรียก API แต่อย่างใด ฉันจะโพสต์คำถามใหม่และเชื่อมโยงคุณ - person kevin_b; 17.04.2016
comment
@jebmarcus URL จะไม่ทำการโทรโดยอัตโนมัติ คุณต้องดำเนินการด้วยตนเอง เพิ่มคำถามใหม่อย่างแน่นอน.. เพื่อให้ผู้อื่นสามารถมีส่วนร่วมเพื่อช่วยเหลือคุณได้ - person Pankaj Parkar; 17.04.2016
comment
โปรดดูว่าคุณสามารถ: stackoverflow.com/questions/36670613/ - person kevin_b; 17.04.2016