Question

我创建了一个数据表，显示了人员及其详细信息的列表。单击数据表时，它必须显示单个人的实体及其详细信息，但问题是，当我单击数据表时，它打开一个聊天框，显示最后一个单击的人的实体更改所有其他聊天框详细信息。

1.如何限制append指令，即一个id的一个聊天框？

2.如何在不更改旧聊天框实体的情况下显示特定人的姓名？

以下是Plunker http://plnkr.co/edit/VTWcZQjlAda0KQ9sjFzI?p=preview

的链接

Answer 1

解决问题的一些提示

childScope = $scope.$new(true);

要使用$ new方法的第一个参数来隔离范围有关详细信息，请查看文档（$ new（isolate，parent）; - ＆gt; https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope）

然后你需要像这样在AppendText函数上添加一个控件来检查是否已存在相同的聊天

$scope.AppendText = function(idx) {
  $scope.userInfo = $scope.artists[idx];
  var chat = $('#chat_'+$scope.userInfo.shortname);
  console.log(chat);
  if ($scope.stage === 'Add' && chat.length==0 ) {
    childScope = $scope.$new(true);
    childScope.userInfo = $scope.userInfo; //<--- add old scope info to new scope
    var compiledDirective = $compile('<div my-directive></div>');
    var directiveElement = compiledDirective(childScope);
    $('.my-directive-placeholder').append(directiveElement);
  } else {
    $scope.stage = 'Add';
  }
}

work plunker http://plnkr.co/edit/TFjlN0U2i4irKtG2D5yu?p=preview

Answer 2

实际上我真的认为这里不需要指令。

可以简单地使用ng-repeat和集合来完成。

请参阅此plunker

我在控制器中添加了这个：

  $scope.bottomListCollection = [];
  $scope.addToBottomList = function(artist) {
    $scope.bottomListCollection.push(artist);
  }

这样点击您的行：

ng-click="addToBottomList(item)"

做一些角色清洁工作的建议：永远不要使用：

$编译。
$元件。
$广播。
Jquery的。

照顾自定义指令，这些是90％未使用的。

提醒一下：指令旨在为元素添加行为。不添加HTML。

希望它有所帮助。

Answer 3

要回答问题的第二部分：创建隔离范围！

这可以通过在创建新范围时传递true来完成：childScope = $scope.$new(true)。

创建隔离范围后，您可以执行以下操作： childScope.userInfo = $scope.userInfo;

PLUNK ：http://plnkr.co/edit/IxPh4EmLpr8WAqRWtRlo?p=preview

此外，使用一次数据绑定的hackish解决方案（不推荐）： http://plnkr.co/edit/RjZNOSyaemqg2eZ4Gma1?p=preview

回答第一部分：您可以跟踪传递给$scope.AppendText函数的ID吗？

PLUNK ：http://plnkr.co/edit/BCNju0rToyVYvNjqzVON?p=preview

希望这有帮助！恕我直言，如果你只能{j}数据ng-repeat来生成聊天框，那就简单多了。

通过角度显示json数据

3 个答案: