我应该在哪里把我的角度指令的HTML？

在编写指令时，我最终在JavaScript中编写了（有时很多）html代码。我应该在哪里把我的角度指令的HTML？

我不喜欢在我的javascript文件中有xml。模板化可能会变得非常复杂，大多数标记引擎会将其渲染为一种颜色，并且必须使用'和+。有没有什么好的做法来分离HTML和JavaScript。

这里是它如何看一个示例：

angular.module('ballentines', ['ngStorage']). 
directive('fineUploader', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     require: '?ngModel', 
     link: function($scope, element, attributes, ngModel) { 
      $scope.uploader = new qq.s3.FineUploader({ 
       debug: true, 
       element: element[0], 
       request: { 
        endpoint: 'endpoint', 
        accessKey: 'accesskey' 
       }, 
       signature: { 
        endpoint: '/s3/' 
       }, 
       iframeSupport: { 
        localBlankPagePath: '/success.html' 
       }, 
       retry: { 
        enableAuto: true // defaults to false 
       }, 
       text: { 
        uploadButton: '<p>Upload File</p>' 
       }, 
       template: 
        '<div class="qq-uploader">' + 
         '<p class="qq-upload-drop-area">{dragZoneText}</span></p>' + 
         '<div class="qq-upload-button btn btn-info">{uploadButtonText}</div>' + 
         '<span class="qq-drop-processing">{dropProcessingText}</span>' + 
         '<ul class="qq-upload-list" ></ul>' + 
        '</div>', 
      }); 
     } 
    }; 

})

来源

2013-10-28 Himmators

你应该推模板到它自己的文件，然后通过templateURL财产加载它。节省了你很多与这些'+'字符混淆:) – Sprottenwels

而不是template你可以使用templateUrl并与部分HTML文件的ADDRES喂它。

angular.module('ballentines', ['ngStorage']). 
directive('fineUploader', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     require: '?ngModel', 
     link: function($scope, element, attributes, ngModel) { 
      $scope.uploader = new qq.s3.FineUploader({ 
       debug: true, 
       element: element[0], 
       request: { 
        endpoint: 'endpoint', 
        accessKey: 'accesskey' 
       }, 
       signature: { 
        endpoint: '/s3/' 
       }, 
       iframeSupport: { 
        localBlankPagePath: '/success.html' 
       }, 
       retry: { 
        enableAuto: true // defaults to false 
       }, 
       text: { 
        uploadButton: '<p>Upload File</p>' 
       }, 
       templateUrl:'partial/your_file.html' 
      }); 
     } 
    }; 

})

来源

2013-10-28 10:05:23

您可以使用templateUrl来指定使用该模板的HTML文件保存的位置

From Doc

最佳练习：除非您的模板非常小，否则通常会更好地将其拆分为其自己的HTML文件并将其加载到 templateUrl选项。

angular.module('ballentines', ['ngStorage']). 
directive('fineUploader', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     require: '?ngModel', 
     link: function($scope, element, attributes, ngModel) { 
      $scope.uploader = new qq.s3.FineUploader({ 
       debug: true, 
       element: element[0], 
       request: { 
        endpoint: 'endpoint', 
        accessKey: 'accesskey' 
       }, 
       signature: { 
        endpoint: '/s3/' 
       }, 
       iframeSupport: { 
        localBlankPagePath: '/success.html' 
       }, 
       retry: { 
        enableAuto: true // defaults to false 
       }, 
       text: { 
        uploadButton: '<p>Upload File</p>' 
       }, 
       templateUrl: 'mytemplate.html' 
      }); 
     } 
    }; 

})

然后在mytemplate.html

<div class="qq-uploader"><p class="qq-upload-drop-area">{dragZoneText}</span></p><div class="qq-upload-button btn btn-info">{uploadButtonText}</div><span class="qq-drop-processing">{dropProcessingText}</span><ul class="qq-upload-list" ></ul></div>

来源

2013-10-28 10:05:05

这是惊人的！ – Himmators

其他人已经表示，它会更容易把你的HTML转换为模板，用templateURL的代码链接。

我想补充的是，你应该看看一些模板服务，以帮助您在开始编写测试时更轻松地完成任务。

我在我的大多数角度项目中使用grunt，所以这是我最终使用的那个。

https://npmjs.org/package/grunt-angular-templates

来源

2013-10-28 17:03:52 Mindstormy

我应该在哪里把我的角度指令的HTML？

回答

相关问题