Question

我得到了这个简单的指令：

app.directive('participants',function(){ 
  return{
    restrict:'E',
    scope:{
      allParticipants:"=",
      appendOption:"="
    },
    templateUrl:'/templates/participants.html',
    link: function(scope,element,attr){
      scope.$watch('allParticipants',function(value){
        if (value){
          value.length > 3 ? showShortParticipants() : showFullParticipants()
        }
      });
    }
  }
});

简而言之 - 我想创建一个不同的子dom元素取决于value。例如，如果value.length大于3，则创建一个类型1的元素，如果不创建类型2的元素（不同的模板从1开始）。

这样做的优雅方式是什么？

谢谢

Answer 1

您可以使用ng-include指令加载不同的外部模板URL。模板url的值可以根据数据的不同结果。

在指令ng-include

上使用template的提案

app.directive('participants', function() {
  return {
    restrict: 'E',
    scope:{allParticipants:"=",appendOption:"="},
    link: function($scope)
    {
      $scope.$watch('allParticipants', function(value)
      {
        // determine template url
        var tempVal;
        switch (value){
            case 1:
                tempVal = 'template1';
                break;
            case 2:
                tempVal = 'template2';
                break;
            default:
                tempVal = 'templatedefault';
                break;
        }       
        // set scope value
        $scope.templateURL = 'templates/' + tempVal + '.html';      
      });
    },
    template: '<ng-include src="templateURL"></ng-include>'
  };
});

在指令ng-switch

上使用template的提案

app.directive('participants', function() {
  return {
    restrict: 'E',
    scope:{allParticipants:"=",appendOption:"="},
    template: '<div ng-switch on="allParticipants">' + 
        '<div ng-switch-when="1">Type 1</div>' +
        '<div ng-switch-when="2">Type 2</div>' +
        '<div ng-switch-when="3">Type 3</div>' +
    '</div>'
  };
});

使用示例ng-if（首选ng-show）

可以实现其他可能性

AngularJS dom元素依赖于指令中的条件

1 个答案: