[AngularJS] Click navigate not working for element directives.

Hi,

I can CTRL+CLICK on an attribute directive and PhpStorm will open the JS file containing that directive, but this does not work if the same directive is used as an element.

Example;

<div my-directive></div>
<my-directive></my-directive>

I can navigate to the directive from the first example, but not the second.

Is there a reason why this doesn't work?

9 comments

Works for me: Ctrl+click on <hello-world> below leads to directive definition:

<hello-world name="me"></hello-world>

angular.module('components', []).directive('helloWorld', function () {...}



Can you attach a sample project that shows up the issue? What WebStorm build do you use?

0

Hi,

I'm using PHPStorm version 138.940

I'm glad to hear this is a supported feature. I'll try creating a simple project and attaching it. brb

0

Here you go.

Clicking on the element directive doesn't work, but clicking the attribute directive does.

I wonder if this will work in your version of the IDE?



Attachment(s):
test.zip
0

The behavior depends on the restriction specified for your directive. “A” is for attribute, “E” is for element

Navigation for

<hello-world name="me"></hello-world>


will work if 'restrict' is set to 'E':

angular
    .module('components', [])
    .directive('helloWorld', function () {
       return {
        restrict: 'E'
       };
});
0

I understand that. All my directives are set to "E" but it still doesn't work. I just didn't set it
in the attached example.

0

But navigation does work correctly for me using your example if the 'restrict: 'E'' is added. I'm attaching the modified project for your reference
See also the attached screencast
I've checked that it also works in PHPStorm 138.940 with AngularJS plugin 135.1063



Attachment(s):
screencast.mp4
test.zip
0

Hi,

I updated my PHPStorm and loaded the modified test.zip project, and it works now!

I noticed that you added the angular.js file to the project. That is something I don't have in my other project that isn't working. I'm using angular from the CDN. Maybe that is way it doesn't work?

0

thanks for update:) You must have uncompressed angular.js file in your project (or set up as a javascript library in Settings/JavaScript/Libraries) to get AngularJS support working. If this file is missing, none of the features will work. See http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/ for more info

1

That's good to know.

My project is setup to use the Angular Git repo as a referenced project. I tried switching it to use just the uncompressed angular.js file but that didn't work.

I'll try just using angular.js in my JS folder for www.

0

Please sign in to leave a comment.