CODEWITHSUNDEEP
javascriptangularjsbreadcrumbs
aftab
aftab

Reputation: 545

how to use breadcrumbs on ng-click?

I have breadcrumb implemented in my application and that is working fine when i am navigating to pages through navbar, below i have button on my page when i click on that button breadcrumb is not working i guess because i am using $location.path , how can i call state on cnaRsk function and make breadcrumb work ?

main.html

<button require-control-point="RISK_ADD;ALIGN_RISK_ADD"
            class="btn btn-default pull-right " type="button" ng-click="cnaRsk()">Create
            And Align New Risk</button>

main.js

$scope.cnaRsk = function () {
        $location.path('/risk/cnaRsk/' + $scope.processDTO.processKey);
    };

app.js 

.state('app.editRiskProcess', {
            url: '/risk/create/:processId',
            templateUrl: 'views/risk/createNewRisk.html',
            controller: 'RiskCtrl',
            data: {
                authenticate: true
            },
            breadcrumb: {
              title: 'riskInProcess :processId',
              path: ['app.home', 'app.editProcess', 'app.editRiskProcess']
          }
        })

Upvotes: 0

Views: 741

Answers (1)

Okazari
Okazari

Reputation: 4597

Since you are using ui-router you should never use $location. Use $state.go and ui-sref instead.

You can change your state on a click on your HTML by adding the ui-sref directive :

<button require-control-point="RISK_ADD;ALIGN_RISK_ADD"
        class="btn btn-default pull-right " 
        type="button" 
        ui-sref="app.editRiskProcess({processId:processDTO.processKey})">
        Create And Align New Risk
</button>

Or if you want to trigger a state change into your controller you can use :

$state.go("app.editRiskProcess",{processId:$scope.processDTO.processKey});

WARNING Remember that theses function should be read like this :

 ui-sref="statename({stateParamName:myvar})"

 $state.go("statename",{stateParamName:myvar});

Hope it helped.

Upvotes: 1

Related Questions