Angularjs 在自定义指令中包装md列表项

为什么我不能在自定义指令中包装md列表项

原始html 指令模板my_user.html

{{user.code}}
{{user.date}
{{user.destination}

将导致

正如yuo所看到的，项目没有正确呈现。 可能是因为使用指令时，md list项不是md list的直接子项，而是由指令标记和div标记包装的。 我尝试在指令中使用replace:true，或者将指令与restricted:'A'一起使用，但没有成功

---

希望有人能帮助我

您应该将

md列表项

添加到您的指令模板中-

加价

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

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

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 : {};
            });

        }
    };
}]);

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

<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"}
    ];
  });