javascript - 如何重新调整我的指令以在两个不同的范围内工作？

Question

http://plnkr.co/edit/39FGMocKB5GtQWnI1TFw?p=preview

我有侧边栏，其中包含标签列表，当您单击标签时，我使用TagDetailsFactory将标签发送到 View 的范围 Controller 。

除了将鼠标悬停在 TagDetailsFactory 范围内的标签上时，一切都运行良好。

tagDetails 模板不会显示，但是，如果您将鼠标悬停在侧边栏范围内的同一标记上，tagDetails 就会显示在两者中。这是错误的。

将鼠标悬停在侧边栏中的标签上应仅显示该标签的标签详细信息，以及 View 范围内的标签的详细信息。

<小时/>

将鼠标悬停在 View 范围中的标签上，不会显示其详细信息

<小时/>

将鼠标悬停在侧边栏范围内的标签上，应该只显示其标签的详细信息，而不是 View 范围内的标签，就像这里一样:

<小时/>

步骤:
- 第一个标签数组位于 cnt Controller 中- 当您单击标签时，它会存储在 TagDetailsFactory 服务中- 然后，我将一个事件广播到 View Controller ，然后调用 TagDetailsFactory 中的 getTagDetails 函数来检索保存的标签并将它们存储到 View Controller 中的 viewTags 数组中。

<小时/>

// Code goes here

angular.module('app', [])

.directive('tagDetails', function() {
    return {
    restrict: "E",
    link: function($scope, el, attrs) {
      // console.debug($scope, attrs);
    },
    scope:{
        tag:'='
    },
    template: '<div ng-show="tag.showDetails">{{tag.details}}</div>'
  };
})

.factory('TagDetailsFactory', function() {

        var savedTags = [];

        var saveTagDetails = function(tag) {
          savedTags.push(tag);
        }

        var getTagDetails = function() {
          return savedTags;
        }

        return {
            saveTagDetails : saveTagDetails,
            getTagDetails  : getTagDetails
        };
})

.controller('sidebar', function($scope,
                             $rootScope,
                             TagDetailsFactory) {
  $scope.tags = [];

  for(var i = 0; i < 10; i++) {
    $scope.tags.push(
      { name: 'Foo Bar ' + i, details: 'Details' + i }
    );
  }

  $scope.showTagDetails = function(t) {
    t.showDetails = true;
  }

  $scope.leaveTag = function(t) {
    t.showDetails = false;
  }

  $scope.sendTag = function(t) {
    TagDetailsFactory.saveTagDetails(t);
    $rootScope.$broadcast('updateView'); 
  }

})

.controller('view', function($scope,
                              $rootScope,
                              TagDetailsFactory) {

  $scope.viewTags = [];

  $scope.$on('updateView', function() {
    $scope.viewTags = TagDetailsFactory.getTagDetails();
  });

  $scope.showTagDetails = function(v) {
    v.showDetails = true;
  }

  $scope.leaveTag = function(v) {
    v.showDetails = false;
  }

});

我必须在这里创建第二个指令吗？成为 View 范围内标签详细信息的模板？或者我当前的 tagDetails 指令可以以 Angular 的方式重新调整用途吗？

Answer 1

我 fork 了你的Plunker带有工作副本，我将解释我所做的更改。

这里的代码有两个问题。第一个是一个简单的拼写错误，导致您的标题未引用正确的鼠标悬停函数。您的函数正在调用 showTagDetailsView(v) 和 leaveTagView(v)，但它们的名称为 showTagDetails 和 leaveTag Controller 。

第二个问题与将项目添加到 savedTags[] 的方式有关。在 JavaScript 中，对象是通过引用传递的。当您调用 savedTags.push(tag); 时，您将对同一对象的引用推送到新数组中。对一个数组中的对象所做的任何更改都将反射(reflect)在另一个数组中。

相反，您需要的是 savedTags[] 中对象的单独副本。这可以通过使用 angular.copy 来完成。请注意，我还在制作副本之前重置了 tag.showDetails = false; ，否则新副本会将其设置为 true，并且详细信息将在副本出现时立即显示，即使您是单击时将鼠标悬停在另一个元素上。

var saveTagDetails = function(tag) {
    tag.showDetails = false;
    savedTags.push(angular.copy(tag));
}

顺便说一句，您可能还会遇到 CSS 问题，因为悬停似乎会更改列表的位置，并且在某些情况下，悬停实际上会导致标签将自身移出悬停，从而导致弹跳效果。