Question

在编写指令时，我最终在我的javascript中编写（有时很多）html代码。

我不想在我的javascript文件中加入xml。模板化可能会变得相当复杂，大多数标记引擎会将其渲染为一种颜色，您必须使用＆＃39;和+。是否有任何好的做法来分离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>',
            });
        }
    };

})

Answer 1

您可以使用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>

Answer 2

而不是template您可以使用templateUrl并将其与部分html文件的地址一起提供。

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'
            });
        }
    };

})

Answer 3

其他人已经表示将HTMl放入模板并使用templateURL链接代码会更容易。

我想补充的是，一旦开始编写测试，你应该研究一些模板服务，以帮助简化工作。

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

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

我应该在哪里将html放在我的角度指令中？

3 个答案: