使用AngularJS模板

时间:2018-04-23 13:06:33

标签: javascript angularjs

我正在使用springboot框架和AngularJS开发一个大项目,我是angularJS的新手,我刚刚开始学习它不超过4天,我正在尝试使用AngularJS模板来制作我的工作更轻松,我选择了一个模板,其中包含我项目中需要的大部分功能,但问题是结构和语法与我在angularJS中看到的不同,我不知道哪个版本它是有角度的,知道我没有这个模板的文档,这里是一个大多数文件的代码看起来如何和结构的例子,你们能帮助我知道哪个角度版本是? [模板层次结构1] [模板层次结构2]`

define(['layout/module', 'lodash', 'notification'], function (module, _) {

    'use strict';

    module.registerDirective('demoStates', function ($rootScope) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'app/layout/directives/demo/demo-states.tpl.html',
            scope: true,
            link: function (scope, element, attributes) {
                element.parent().css({
                    position: 'relative'
                });

                element.on('click', '#demo-setting', function () {
                    element.toggleClass('activate')
                })
            },
            controller: function ($scope) {
                var $root = $('body');

                $scope.$watch('fixedHeader', function (fixedHeader) {
                    localStorage.setItem('sm-fixed-header', fixedHeader);
                    $root.toggleClass('fixed-header', fixedHeader);
                    if (fixedHeader == false) {
                        $scope.fixedRibbon = false;
                        $scope.fixedNavigation = false;
                    }
                });


                $scope.$watch('fixedNavigation', function (fixedNavigation) {
                    localStorage.setItem('sm-fixed-navigation', fixedNavigation);
                    $root.toggleClass('fixed-navigation', fixedNavigation);
                    if (fixedNavigation) {
                        $scope.insideContainer = false;
                        $scope.fixedHeader = true;
                    } else {
                        $scope.fixedRibbon = false;
                    }
                });


                $scope.$watch('fixedRibbon', function (fixedRibbon) {
                    localStorage.setItem('sm-fixed-ribbon', fixedRibbon);
                    $root.toggleClass('fixed-ribbon', fixedRibbon);
                    if (fixedRibbon) {
                        $scope.fixedHeader = true;
                        $scope.fixedNavigation = true;
                        $scope.insideContainer = false;
                    }
                });

                $scope.$watch('fixedPageFooter', function (fixedPageFooter) {
                    localStorage.setItem('sm-fixed-page-footer', fixedPageFooter);
                    $root.toggleClass('fixed-page-footer', fixedPageFooter);
                });

                $scope.$watch('insideContainer', function (insideContainer) {
                    localStorage.setItem('sm-inside-container', insideContainer);
                    $root.toggleClass('container', insideContainer);
                    if (insideContainer) {
                        $scope.fixedRibbon = false;
                        $scope.fixedNavigation = false;
                    }
                });

                $scope.$watch('rtl', function (rtl) {
                    localStorage.setItem('sm-rtl', rtl);
                    $root.toggleClass('smart-rtl', rtl);
                });

                $scope.$watch('menuOnTop', function (menuOnTop) {
                    $rootScope.$broadcast('$smartLayoutMenuOnTop', menuOnTop);
                    localStorage.setItem('sm-menu-on-top', menuOnTop);
                    $root.toggleClass('menu-on-top', menuOnTop);

                    if(menuOnTop)$root.removeClass('minified');
                });

                $scope.$watch('colorblindFriendly', function (colorblindFriendly) {
                    localStorage.setItem('sm-colorblind-friendly', colorblindFriendly);
                    $root.toggleClass('colorblind-friendly', colorblindFriendly);
                });


                $scope.fixedHeader = localStorage.getItem('sm-fixed-header') == 'true';
                $scope.fixedNavigation = localStorage.getItem('sm-fixed-navigation') == 'true';
                $scope.fixedRibbon = localStorage.getItem('sm-fixed-ribbon') == 'true';
                $scope.fixedPageFooter = localStorage.getItem('sm-fixed-page-footer') == 'true';
                $scope.insideContainer = localStorage.getItem('sm-inside-container') == 'true';
                $scope.rtl = localStorage.getItem('sm-rtl') == 'true';
                $scope.menuOnTop = localStorage.getItem('sm-menu-on-top') == 'true' || $root.hasClass('menu-on-top');
                $scope.colorblindFriendly = localStorage.getItem('sm-colorblind-friendly') == 'true';


                $scope.skins = appConfig.skins;

                $scope.smartSkin = localStorage.getItem('sm-skin') || appConfig.smartSkin;


                $scope.setSkin = function (skin) {
                    $scope.smartSkin = skin.name;
                    $root.removeClass(_.pluck($scope.skins, 'name').join(' '));
                    $root.addClass(skin.name);
                    localStorage.setItem('sm-skin', skin.name);
                    $("#logo img").attr('src', skin.logo);
                };


                if($scope.smartSkin != "smart-style-0"){
                    $scope.setSkin(_.find($scope.skins, {name: $scope.smartSkin}))
                }


                $scope.factoryReset = function () {
                    $.SmartMessageBox({
                        title: "<i class='fa fa-refresh' style='color:green'></i> Clear Local Storage",
                        content: "Would you like to RESET all your saved widgets and clear LocalStorage?1",
                        buttons: '[No][Yes]'
                    }, function (ButtonPressed) {
                        if (ButtonPressed == "Yes" && localStorage) {
                            localStorage.clear();
                            location.reload()
                        }
                    });
                }
            }
        }
    });
});

`1

0 个答案:

没有答案