Angularjs 嵌套的角度指令未按预期工作

我一直在做一个指令来显示一些HTML和处理事件，因为保持代码的可重用性似乎是明智的。该指令放置在ng repeat内，并按预期工作

现在我来添加一些更多的显示逻辑：2种模式“网格”和“列表”，并为每个模式创建2个ng重复元素。在这一点上，整个事情似乎随着一些意想不到的事情的发生而分崩离析

我创建了一个Plunkr来演示：

App.js

var app = angular.module('myApp', []);

app.directive('documentObject', [function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      object: '=',
      viewmode: '=',
    },
    templateUrl: 'storage-object.html',
    link: function(scope, element, attrs) {
      if (scope.viewMode === 'grid') {
        scope.class = 'grid-view';
      } else {
        scope.class = 'list-view';
      }
    }
  }
}]);

app.controller('DocumentsController', ['$scope', function($scope) {
  $scope.browser = {
    viewMode: 'grid',
    files: [{name: 'First'}, {name: 'Second'}, {name: 'Third'}]
  };
}]);

index.html

<div ng-switch="browser.viewMode" class="filebrowser">
  <div ng-switch-when="grid">
    <div ng-repeat="file in browser.files">
      <document-object viewmode="browser.viewMode" object="file"></document-object>
    </div>
  </div>
  <table ng-switch-when="list">
    <tr ng-repeat="file in browser.files">
      <document-object viewmode="browser.viewMode" object="file"></document-object>
    </tr>
  </table>
</div>

storage-object.html

<div ng-if="viewmode == 'grid'" class="filebrowser {{ viewmode }}">
    Grid Mode: {{ viewmode }}
    <span class="file-label {{ class }}">{{ object.name }}</span>
</div>

<td ng-if="viewmode == 'list'" class="filebrowser {{ viewmode }}">
    List Mode: {{ viewmode }}
    <span class="file-label {{ class }}">{{ object.name }}</span>
</td>

网格模式：{{viewmode}}
{{object.name}
列表模式：{{viewmode}}
{{object.name}

网格模式应仅将项目显示为网格，列表模式应显示为表格。现在的情况是网格模式显示所有内容，列表模式只渲染一个元素

这里发生了什么事？

请看这里

您错过了

标记

<table ng-switch-when="list">
  <tr ng-repeat="file in browser.files">
    <td> <!--here -->
      <document-object viewmode="browser.viewMode" object="file"></document-object>
    </td>

  </tr>
</table>

---

发生这种情况是因为除了

或

元素之外，不允许您作为

的直接子元素拥有任何其他内容

在您的情况下，您有一个

元素，这会导致浏览器移动它（因为它不允许在它所在的位置），这反过来会混淆

ng开关

将

包装在

中并将其转换为模板（例如，将

替换为

）可以解决此问题

---

index.html：

...
<table ng-switch-when="list">
    <tr ng-repeat="file in browser.files">
        <td>
            <document-object viewmode="browser.viewMode" object="file"></document-object>
        </td>
    </tr>
</table>

。。。

storage-object.html：

...
<div ng-if="viewmode == 'list'" class="filebrowser {{ viewmode }}">
    List Mode: {{ viewmode }}
    <span class="file-label {{ class }}">{{ object.name }}</span>
</div>

。。。
列表模式：{{viewmode}}
{{object.name}

---

---

另请参见，此

需要发布一些代码，因为这是一个仅链接类型的问题。tage在指令的模板中。但我看到你的版本是有效的。嗯。@RobinElvin基本上，只有th和td元素可以是tr的直接内容。在您尝试将document对象作为子标记时，当然，我怎么看不到这一点？更改了我的代码，效果非常好，谢谢！谢谢你的解释。当@Sylvester第一个进入时，我必须奖励他。@RobinElvin:不客气：）这并不是说你“必须”，但如果你想的话，那很好。我只是发布了答案（即使解决方案与sylvester的几乎相同），因为我相信这个解释可能对将来的参考更有价值。