【问题标题】：wrap md-list-item in custom directive在自定义指令中包装 md-list-item
【发布时间】：2016-11-14 10:02:57
【问题描述】：

为什么我不能将 md-list-item 包装在自定义指令中？

原始html

 <md-list class="md-dense">
        <md-list-item  ng-repeat="user in items"> 
            <img ng-src="{{user.img}}" class="md-avatar"/>
            <span flex>{{user.code}}</span>
            <span flex>{{user.date}}</span>
            <span flex>{{user.destination}}</span>
            <md-divider inset></md-divider>
        </md-list-item>
 </md-list>

结果是

指令我的用户

指令消费者

<md-list class="md-dense">
    <md-list-item  ng-repeat="user in items"> 
       <my-user ng-model=user></my-user>
       <md-divider inset></md-divider>
    </md-list-item>
</md-list>

my_user.directive.js

angular.module("monitorApp")
.directive('myUser',[function(){
    return {
        restrict:'E',
        scope:{
            ngModel:'='
        },
        templateUrl:'/src/my_user.html',
        link:function(scope){
            scope.$watch('ngModel',function(){
                scope.user = scope.ngModel ? scope.ngModel : {};
            });

        }
    };
}]);

指令模板 my_user.html

<div>
  <img ng-src="{{user.img}}" class="md-avatar"/>
  <span flex>{{user.code}}</span>
  <span flex>{{user.date}}</span>
  <span flex>{{user.destination}}</span>
</div>

会导致

正如您所见，项目未正确呈现。可能是因为使用指令 md-list-item 不是 md-list 的直接子项，而是由指令标签和 div 标签包装。我尝试在我的指令中使用 replace:true 或使用带限制的指令：'A' 但没有成功。

希望有人可以帮助我

【问题讨论】：

标签： angularjs angularjs-directive material-design angular-material

【解决方案1】：

您应该在指令模板中添加md-list-item - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-list class="md-dense">
    <my-user ng-repeat="user in items" ng-model=user></my-user>
    <md-divider inset></md-divider>
  </md-list>

  <script type="text/ng-template" id="my_user.html">
    <md-list-item>
      <img ng-src="{{user.img}}" class="md-avatar"/>
      <span flex>{{user.code}}</span>
      <span flex>{{user.date}}</span>
      <span flex>{{user.destination}}</span>
    </md-list-item>
  </script>
</div>

angular.module('MyApp',['ngMaterial'])

  .directive('myUser',[function(){
    return {
      restrict:'E',
      scope:{
        ngModel:'='
      },
      templateUrl:'my_user.html',
      link:function(scope){
        scope.$watch('ngModel',function(){
          scope.user = scope.ngModel ? scope.ngModel : {};
        });
      }
    };
  }])

  .controller('AppCtrl', function($scope) {
    $scope.items = [
      {code: 1, date: "14/11/16", destination: "Camden"},
      {code: 2, date: "14/11/16", destination: "Camden"},
      {code: 3, date: "14/11/16", destination: "Camden"}
    ];
  });

【讨论】：