如何在角度

Question

模板使用angular动态地使用值和颜色附加内容，如下图所示。使用预定义模板从后端值动态创建DOM元素。

角度js中使用了哪些元素？

1. 指令
2. 模板

如何使用Jquery ui sortable对角度JS中的指令进行排序？

.directive('contentItem',function($compile){
    var imageTemplate = '<div class="mypanel mypanel-default portlet" ng-class="{fullscreen : fullscreen}" ng-show="close">'+
                '<div class="mypanel-heading">'+
                    '<div class="mypanel-btn" >'+
                        '<a href="" class="mypanel-fullscreen" tooltip="{{tooltipfullscreen}}" ng-click="toggleFullscreen()"><i class="{{fullscreenicon}}"></i></a>'+
                        '<a href="" class="mypanel-minimize"  ng-click="toggle()" tooltip="{{tooltipminimize}}"><i class="{{minimizeicon}}"></i></a>'+
                        '<a href="" class="mypanel-close tooltips" data-toggle="tooltip" title="Close Panel" tooltip="Close" ng-click="toggleHide()"><i class="fa fa-times"></i></a>'+
                    '</div>'+
                    '<h5 class="mypanel-title">Optional Sizes</h5>'+
                '</div>'+
                '<div class="mypanel-body" ng-show="on">'+
                    '<div id="area-chart" class="height300">'+
                    '</div>'+
             '</div>'+
            '</div>';



var getTemplate = function(contentType) {

        var template = '';

        switch(contentType) {
            case 'image':
                template = imageTemplate;
                break;
            case 'video':
                template = imageTemplate;
                break;
            case 'notes':
                template = imageTemplate;
                break;
        }

        return template;
    }

    var linker = function(scope, element, attrs) {
        scope.on = true;
        scope.tooltipminimize = 'Minimize';
        scope.minimizeicon = 'fa fa-minus';
        scope.fullscreenicon = 'fa fa-expand';
        scope.tooltipfullscreen = 'Fullscreen';
        scope.fullscreen = false;
        scope.close = true;
        scope.toggle = function () {
                scope.on = !scope.on;
                if(scope.tooltipminimize == 'Minimize'){
                    scope.minimizeicon = 'fa fa-plus';
                    scope.tooltipminimize = 'Maximize';
                }
                else{
                    scope.tooltipminimize = 'Minimize';
                    scope.minimizeicon = 'fa fa-minus';
                }
        };
        scope.toggleHide = function () {
                scope.close = !scope.close;
        };
        scope.toggleFullscreen = function(){
            scope.fullscreen = !scope.fullscreen;
            if(scope.tooltipfullscreen == 'Fullscreen'){
                    scope.fullscreenicon = 'fa fa-compress';
                    scope.tooltipfullscreen = 'Exit Fullscreen';
                }
                else{
                    scope.fullscreenicon = 'fa fa-expand';
                    scope.tooltipfullscreen = 'Fullscreen';
                }
        };
        scope.sortableOptions = {
        connectWith: '.sortable',
        item: '.portlet',
        placeholder: 'placeholder',
        dropOnEmpty: true
        };
        scope.rootDirectory = 'images/';
        element.html(getTemplate('image')).show();
        $compile(element.contents())(scope);
    }
    return{
        restrict: "E",
        link: linker,
        scope:true
    };
});

Answer 1

这绝对是指令的情况。传入你的参数，并使用链接函数基本上从字符串构建模板。在下面的示例中，我正在使用参数来构建表单的输入。

    .directive('qrunChild', ['$compile', function ($compile) {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            ngModel: '=',
        },
        link: function (scope, element, iAttrs, ngModelController) {

            var tpl = '';
            var bpstart = '<div class="row no-margin">';
            var bp = '&nbsp;&nbsp;<span class="pull-left"><i class="fa fa-circle text-xs text-info-lt m-r-xs pull-left"></i>{{ngModel.name}}</span><span class="badge pull-right">{{ngModel.type}}</span>';
            var bpend = '</div class="row">';
            if (scope.ngModel.type == 'text') {
                //tpl = '<input type="text" ng-model="ngModel.type">';
            }
            else if (scope.ngModel.type == 'mc') {
                tpl = '<div ng-repeat="opt in ngModel.options"><label class="ui-checks option"><input type="radio" ng-model="ngModel.optionsSelected" value="{{opt.name}}"><i style="margin-right:20px;"></i>{{opt.name}}</label></div>';
            }

            view = $compile(bpstart + bp + tpl + bpend)(scope);
            return $(element).html(view);

        }
    };
}])

我可以在我的HTML中将其调用如下：     

编辑：如果你想为模板提供一个URL，你可以这样做（在这种情况下，它只是在父作用域中使用一个名为item.templateUrl的参数）：

.directive('dynamicTemplate', function () {
    return {
        template: '<ng-include src="getTemplateUrl()"/>',
        scope: false,
        transclude: true,
        restrict: 'E',
        controller: function ($scope) {
            $scope.getTemplateUrl = function () {
                //resolve the template
                return $scope.item.templateUrl;
            }
        }
    };
})