My user interface route includes different states:
.state('projects', {
abstract: true,
url: "/?username&token",
templateUrl: "projects/views/Projects.html",
controller: 'ProjectController'
})
.state('projects.mine', {
url: "mine",
templateUrl: 'projects/views/ProjectsMine.html'
})
.state('projects.all', {
url: "all",
templateUrl: 'projects/views/ProjectsAll.html'
})
I created a directive:
app.directive('description', function(){
return{
restrict: 'E',
templateUrl : 'projects/views/directives/ProjectDescription.html',
controller:ProjectController
}
});
I have two files with the same content for the state templates, but one uses the description directive while the other directly uses the template content. However, there is an issue where the controller reloads when not using the directive.
Everything is functioning correctly, except that when I navigate to the 'all' route, the ProjectController gets reloaded. The directive consists of:
<table>
<tr >
<td><b>name</b> </td>
<td>{{project.name}}</td>
</tr>
<tr >
<td><b>owner</b> </td>
<td>{{project.owner}}</td>
</tr>
<table>
The directive is added within an ng-repeat (in the 'all' state):
<div ng-repeat="project in project|filter:searchText">
<description></description>
</div>
Links to states on my HTML page:
<a ui-sref=".mine()"><button>my projects</button></a>
<a ui-sref=".all()"><button>all projects</button></a>
<div ui-view></div>
The 'mine' state uses the directive content and does not trigger a controller reload. However, going from 'mine' to 'all' results in a controller reload.
Is there a way to prevent the controller from reloading while keeping everything else unchanged?