I am working with AngularJS in PhpStorm. I am new to both.
I have two files in my project, index.html and app.js. From index.html, I am referencing a variable store.products defined in app.js, but PhpStorm tells me that it cannot resolve the variable.
PhpStorm has no problems with product.name.
The code works without problems in the browser, so I figured something must be wrong with the editor. Or maybe the error is just a subtle one that the browser simply ignores.
index.html (the problem is in the ng-repeat directive):
<!DOCTYPE html>
<html ng-app="gemStore">
<head lang="en">
(...)
</head>
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
</h3>
</li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js:
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function() {
this.products = gems;
});
var gems = [
...
];
})();
I was hoping someone could spot the error. Even though the page renders correctly in the browser, it is pretty annoying that PhpStorm displays the error.
Edit: In app.js, this.products is not marked with "unused definition: products" when I reference store.products from index.html. So somehow PhpStorm can see that the variable is being used, but still can't see it from index.html's point of view.
