1

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

我不喜欢在我的 javascriptfiles 中有 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>',
            });
        }
    };

})
4

3 回答 3

6

您可以使用templateUrl指定保存带有模板的 html 文件的位置

来自文档

最佳实践：除非您的模板非常小，否则最好将其拆分为自己的 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-28T10:05:05.480 回答
1

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

})
于 2013-10-28T10:05:23.460 回答
0

其他人已经说过，将您的 HTMl 放入模板并使用 templateURL 链接代码会更容易。

我想补充的是，一旦您开始编写测试，您应该研究一些模板服务以帮助使事情变得更容易。

我在大多数 Angular 项目中都使用 grunt，所以这是我最终使用的。

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

于 2013-10-28T17:03:52.447 回答