Href or ui-sref doesn't work

ionic-v1
1

I have two templates, Father.html and Detail.html. I would click on a link in the Father template and access correctly to the Detail template, but i see the previous template with overlapped the components of the next. (I tried with ui-sref) Here is the code:

(Myapp.js)
.state(‘father’, {
url: “/father”,
templateUrl: “templates/father.html”,
controller: “CtrlFather”
})
.state(‘detail’, {
url: “father/detail”,
templateUrl: “templates/detail.html”,
controller: “CtrlDetail”
});

(Father.html)

<ion-view>
...
<a  ui-sref="detail">
...
</ion-view>

In the Detail template i haven’t used the ion-view due to an error that cause the block of the application.

Any ideas?

2

Could you setup codepen for your code?

4

Here you are:

5

This issue was solved! I deleted various < ion-header-bar> and substitute it with the general < ion-nav-bar> and < ion-nav-back-button> , after that I added an abstract state for menu in myapp.js and used $stateParams for passing parameters from the parent to the son controller:

MYAPP.JS
.state(‘menu’,{
url:"/menu",
templateUrl: “templates/menu.html”,
controller: “CtrlMenu”,
abstract=true,
})
.state(‘menu.father’, {
url: “/father”,
views: {
‘menuV’: {
templateUrl: “templates/father.html”,
controller: “CtrlFather”
}
}
})
.state(‘menu.detail’, {
url: “/detail/:id”,
views: {
‘menuV’: {
templateUrl: “templates/detail.html”,
controller: “CtrlDetail”
}
}
});

SON.JS
angular.module(…).controller(…, function(…){
$currentId=$stateParams.id;

$scope.getElWithID = function(id){
…
}

$scope.getElWithID($currentId);

FATHER.HTML
…
{{parent.name}}

MENU.HTML
…
< ion-nav-view name=“menuV”>< /ion-nav-view>