Using directives in angular

Question

I am quite new to angular. I am trying to manage a list of contacts to be able to select one to display some details on the side. I was able to do it without directives but then I wanted to use directives and be able to show which one is selected in the list. With directives I am able to display the list but when I select a contact it doesn't show details anymore so the select is not working and I can't get it to work as those directives are making me crazy.

Here is contact.html:

<li><a href selected="selected" ng-click='selectContact(contact)' ng-transclude></a></li>

// Code goes here

var app = angular.module("contactList", []);

app.service("peopleService", function($http) {
  this.getPeople = function() {
    return $http.get('people.json');
  };
});

app.controller("peopleController", function($scope, peopleService) {
  $scope.selectedContact = {};
  $scope.selectedContactImage = ""
  $scope.showDetail = false;

  peopleService.getPeople().then(function(response) {
    $scope.people = response.data.People;
  });

  $scope.selectContact = function(contact) {
    $scope.selectedContact = contact;
    if (contact.img) {
      $scope.selectedContactImage = contact.img;
    }
    $scope.showDetail = true;
  };
});


app.directive("contactList", function(){
    return{
        restrict: 'EA',
        replace: true,
        transclude: true,
        template: "<div ng-transclude></div>",
        controller: function(){
            this.gotOpened = function(selectedContact){
                contacts.forEach(function(contact){
                    if(selectedContact != contact){
                        contact.selected = false;
                    }
                });
            };
        }
    };
});

app.directive("contact", function(){
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        require: '^?contactList',
        scope: {selected: '='},
        templateUrl: 'contact.html',
        link: function(scope, element, attrs, contactListController){
            scope.selected = false;
            scope.selectContact = function selectContact(){
                scope.selected = !scope.selected;
                contactListController.gotOpened(scope);
            };
        }
    };
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="contactList">
  <div ng-controller="peopleController">
    <contact-list>
      <contact class="contact" ng-repeat="contact in people">
        {{contact.name}}
      </contact>
    </contact-list>
    <div class="list">
      <ul>
        <li ng-repeat="p in people">
          <a href ng-click='selectContact(p)'>{{p.name}}</a>
        </li>

      </ul>
    </div>

    <div class="detail" ng-show="showDetail">
      <div class="detailimagewrapper">
        <img class="detailimage" src="{{selectedContactImage}}">
      </div>
      <label>Rating</label>
      <p>{{selectedContact.rating}}</p>
      <label>Description</label>
      <p>{{selectedContact.Description}}</p>
    </div>
  </div>
</body>

</html>

score 0 · Answer 1 · answered Mar 16 '18 at 19:51

Looks like you are using transclude and replace here. I expect this is causing your anchor tag to be replaced by the content which your contact directive is wrapping. Try removing the ng-transclude attribute from the anchor tag and instead adding <ng-transclude></ng-transclude> within the anchor tag.

contact.html would become:

<li>
    <a href selected="selected" ng-click='selectContact(contact)'>
        <ng-transclude></ng-transclude>
    </a>
</li>

Using directives in angular

1 Answers1