Question

我对角度很新。我正在尝试管理联系人列表，以便能够选择一个以显示侧面的一些细节。我能够在没有指令的情况下完成它，但后来我想使用指令并能够显示列表中选择了哪一个。通过指令，我可以显示列表，但是当我选择一个联系人时，它不再显示详细信息，因此选择不起作用，我无法让它工作，因为这些指令让我发疯。

这是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>

Answer 1

看起来您正在使用transclude并在此处替换。我希望这会导致您的锚标记被您的联系人指令包装的内容替换。尝试从锚标记中删除ng-transclude属性，然后在锚标记中添加<ng-transclude></ng-transclude>。

contact.html将成为：

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

使用角度指令

1 个答案: