CODEWITHSUNDEEP
angularjsangular-strap
Rober
Rober

Reputation: 6108

AngularJS 1.0.7 in html5Mode and AngularStrap bs-select directive redirect to index

I have and AngularJS 1.0.7 web application and I´m using AngularStrap select directive. Everything was working fine until I have moved my application to html5Mode. I did that to prettify my URLs.

But now, when I select an option in any bs-select component I´m redirected to index.

HTML

<select class="show-tick" ng-model="selectType" ng-options="boatType as (boatType.name | translate) for boatType in boatTypes" bs-select>
    <option value="" selected>{{'BOAT_TYPE' | translate}}</option>
</select>

JS Controller:

$scope.$watch('selectType', function() { 
            if($scope.selectType != undefined) {
                BoatModel.query({type_id: $scope.selectType.id},
                    function success(result){
                        if(result.length == 0){
                            $scope.boatModels = new Array ();
                            $scope.selectModel = undefined;
                            SearcherService.setModel(undefined);
                        }
                        else{
                            $scope.boatModels = result.slice();        
                        }
                    }
                );
                SearcherService.setType($scope.selectType.id);
                $scope.selectModel = undefined;
            }
            else {
                SearcherService.setType(undefined);
                $scope.selectModel = undefined;
            }
        });

Upvotes: 0

Views: 103

Answers (1)

Rober
Rober

Reputation: 6108

I fixed it.

I found out the code generated by the Bootstrap Select directive is not compatible with html5Mode because it inserted an href="#" in each option in the select. When you click on it you are redirected to the index.

Original Code in the directive

createA:function(test, classes) {
         return '<a tabindex="-1" href="#" class="'+classes+'">' +
                 '<span class="pull-left">' + test + '</span>' +
                 '<i class="icon-ok check-mark"></i>' +
                 '</a>';

I just fixed it by removing the href, like this:

createA:function(test, classes) {
         return '<a tabindex="-1" class="'+classes+'">' +
                 '<span class="pull-left">' + test + '</span>' +
                 '<i class="icon-ok check-mark"></i>' +
                 '</a>';

Upvotes: 0

Related Questions