0

I am having trouble to access angularjs expressions after the click event.

index.html

<div class="row">
    <a href="#/company"><div class="tile col col-comp cat-a-g grow-appear" ng-click="onSelect(item)" ng-repeat="item in data" >
        <p>{{item.compname}}</p>
    </div></a>
</div>

The above code populate a list of company names. When I click on a company it opens company.html

company.html

<div class="comp-info col s12 grow-appear">
   <span class="comp-logo-container">
      <img src="images/aap3-160x70-black.jpg" />
   </span>
   <span class="comp-info-container">
      <p><i class="far fa-envelope"></i>{{item.compemail}}</p>
      <p><i class="fas fa-location-arrow"></i>{{item.compbuilding}}</p>
      <p><i class="fas fa-phone"></i>{{item.compphone}}</p>
   </span>
</div>

Controller (app.js)

$scope.onSelect = function($event, data) {
   console.log(data);
}

File Structure

root
    +--public
        +--templates
            +--company.html
            +--index.html
        +--javascript
            +--app.js
    +--views
        +main.html

I am using ngRoute to inject index.html and company.html into main.html.

app.config(function($routeProvider){
    $routeProvider

    .when ('/', {
         templateUrl: 'templates/home.html',
         controller: 'AppCtrl'
    })

    .when ('/company', {
         templateUrl: 'templates/company.html',
         controller: 'AppCtrl'
    })
});

So when I console.log() the controller, it shows the array of data but it doesn't add it to the company html document. What am I missing?

csongor_kocsis
  • 51
  • 1
  • 9

1 Answers1

0

The structure of your application is a little unclear, but I think your problem may be to do with $scope. item in item in data is not accessible from the root of $scope. You can do something like this:

<div class="comp-info col s12 grow-appear">
   <span class="comp-logo-container">
       <img src="images/aap3-160x70-black.jpg" />
   </span>
   <span class="comp-info-container">
       <p><i class="far fa-envelope"></i>{{selected.compemail}}</p>
       <p><i class="fas fa-location-arrow"></i>{{selected.compbuilding}}
       </p>
       <p><i class="fas fa-phone"></i>{{selected.compphone}}</p>
   </span>
</div>

Then:

$scope.onSelect = function($event, data) {
  $scope.selected = data;
}
see sharper
  • 11,505
  • 8
  • 46
  • 65
  • It's not the file structure I am referring to but the binding of your controllers to the templates. It is not clear how either index.html or company.html is bound the controller that provides its scope. You need an `ng-controller` directive or some kind of routing set-up to link the views to their respective controllers. How are you doing that? – see sharper Mar 13 '18 at 06:53
  • I am using ngRoute to link the views to the controller. They share the same controller. – csongor_kocsis Mar 13 '18 at 06:58
  • 1
    OK, so when you change states, you will lose your old scope and a new one will be created. You need to pass the identifier of the item as a parameter. See e.g. https://stackoverflow.com/questions/30003582/how-to-pass-param-in-routeprovider-in-angular-js – see sharper Mar 13 '18 at 07:08
  • 1
    One (not recommended) way to get the result you want without making any major modifications to your setup would be to use $rootScope to store the selected item. `$rootScope.selected = data`. Not recommended because it's dirty - you should minimise use of $rootScope - but at least you can see it working. – see sharper Mar 13 '18 at 07:11
  • So I understand that somehow it needs to know when I click on a link which item I am trying to retrieve. But I don't understand that if I pass the indentifier of the item as a parameter how can I access the rest of the value of the item (e.g. item.compname, item.compemail ...) – csongor_kocsis Mar 13 '18 at 07:51
  • When I use `$rootScope.selected = data` it says rootScope is not defined. @seesharper – csongor_kocsis Mar 13 '18 at 08:04
  • Then you can find the item in your data array by id. You get the id from $routeParams. Then search the data array for the correct id value. An easy way is to install lodash in your application then do $scope.selected =_.find(data, function(item) {return item.id===id}); – see sharper Mar 13 '18 at 08:08
  • You have to inject $rootScope into your controller. – see sharper Mar 13 '18 at 08:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166735/discussion-between-see-sharper-and-csongor-kocsis). – see sharper Mar 13 '18 at 08:21