angular 经历实例——切换皮肤

皮肤更换

function() {
    'use strict';
    mdmApp
      .directive('styleSwitch',['$stateParams', 'mzServer',styleSwitchFn]);//系统样式切换
    function styleSwitchFn($stateParams, mzServer)
    {
        return {
            restrict: 'AE',
            controller: function ($scope)
            {
                $scope.themesheet = $('<link href="css/skincss/default.css" rel="stylesheet" />').appendTo('head');
            },link: function (scope, element, attrs)
            {
                angular.element(element).find("input[theme]").each(function ()
                {
                    var datas = "";
                    if ($(this).is(':checked'))
                    {
                        var className = $(this).attr("className");
                        datas = "css/skincss/" + className + ".css";
                        scope.themesheet.attr('href', datas);
                    }
                   
                    $(this).on('click', function () {
                        //var index = $(this).attr("theme");
                        var className = $(this).attr("className");
                        datas = "css/skincss/" + className + ".css";
                        scope.themesheet.attr('href', datas);
                    })
                  
                })

            }
        }
    }

})();

初期

function layoutTtheme($timeout) {
    return {
        restrict: 'A',    
        controller: function ($scope, $element) {
            var themes = {
                "default": "css/skincss/default.css",
                "first": "css/skincss/fifth.css",
                "second": "css/skincss/fourth.css",
                "third": "css/skincss/sixth.css",
                "fourth": "css/skincss/first.css",
                //"fifth": "css/skincss/second.css",             
                //"sixth": "css/skincss/third.css",
                "seventh": "css/skincss/seventh.css",
                "fifth": "css/skincss/first-2.css",
                "sixth": "css/skincss/first-3.css",
            }
            var themesheet = $('<link href="' + themes['default'] + '" rel="stylesheet" />');
           themesheet.appendTo('head')
                $scope.skinttheme = function ($event) {
                    var themeurl = themes[$event.currentTarget.getAttribute('data-theme')];
                themesheet.attr('href', themeurl);
             }
        }
    };
};