Angular - Template to Controller Association

I use Angular 1.x with ui-router. I associate my controller/controllerAs with the template in my state definitions. For development, I end up adding ng-controller to my template just to get intellisense/completion/etc. and then having to take it out before building. Once removed, there are a ton or warnings in the IDE for both the template and controller and I've lost any IDE support for making changes to the template. The template doesn't know what "ctrl.myProperty" is anymore and in the controller there are warnings that "myProperty" is never used.

Is there any way in the IDE to associate the template with the controller it uses just for IDE support? Maybe a comment tag in the template that tells the IDE the controller it uses? If that doesn't exist, it seems like it would be an awesome feature to add.

0
4 comments

No, there are no special comments/hidden options for this, associations are created based on your code. What does your code look like exactly? Both controller definition and usage

0

I'm just talking about standard Angular HTML template and controllers here. There's nothing special or unique about my EXACT code. I've been using WebStorm for years and it's always the same issue.

<div class="container" ng-controller="MyController as ctrl">
{{ctrl.someData}}
</div>

If it's like that, with the ng-controller in the template, then everything is awesome (intellisense, code "validation")... but having the template and controller "hard-coded" like that is pretty lame and it also doesn't allow for resolves through ui-router. Removing ng-controller from the above and using ui-router's state provider to associate the controller and view like below causes WebStorm to have no idea what controller the template is using:

$stateProvider.state('myState', {
url: '/my-state',
templateUrl: 'template.html',
controller: 'MyController',
controllerAs: 'ctrl',
resolve: {
someData: ['SomeService', (service) => service.getSomeData()]
}
});

The IDE has no idea that the controller is being used by the template and the template has no idea what controller it's displaying data for.

0

Please sign in to leave a comment.