我應該在哪裏把我的角度指令的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？

回答

相關問題