Изменить класс тегов тегов в Angular 1

Моя проблема: у меня есть несколько страниц, для которых требуется отдельный класс тела для каждой страницы.Изменить класс тегов тегов в Angular 1

Таким образом, без использования $rootScope, как это изменить в DOM в зависимости от того, какая страница отображается?

<body class="class-that-needs-changing">

источник

2016-04-23 Joe Hill

нескольких страниц, означающих отдельные HTML-файлы или просто разные Ui маршруты? – MarkoCen

Отдельные html-страницы –

Просто бросая мои 2 цента ... вы считали атрибут ng-class? –

У вас есть два основных варианта:

Добавить переменную в $ rootScope и сделать с ней. Если у вас есть только одна глобальная настройка для класса тела, которую нужно изменить, я бы предложил это, поскольку это легко.
Сделайте угловое обслуживание, которое обрабатывает глобальные настройки страницы. Внесите эту службу в контроллеры, которые должны иметь глобальные параметры страницы, а затем извлекать глобальные параметры страницы из службы и связывать их с каждой областью контроллера. Если у вас есть много глобальных настроек или нужна какая-либо бизнес-логика, используйте вместо этого этот подход к сервису.

источник

2016-04-23 02:44:03 gnicholas

Мне всегда говорили никогда не использовать $ rootScope –

Это считается плохой практикой. Включение большого количества нежелательной почты в $ rootScope затруднит понимание вашего приложения, поскольку этот мусор унаследован во всех других областях. С другой стороны, выполнение углового обслуживания, впрыскивание его в каждый контроллер и ручная проводка областей - это достойный объем работы и усложняет простую проблему. Для маленькой проблемы, подобной этой, использование $ rootScope будет в порядке. Однако, если необходимо добавить более глобальные конфигурации на страницу, вы можете захотеть использовать сервис. – gnicholas

О, ладно, я вижу вашу логику. Там действительно не так много, кроме изменения класса, поэтому я думаю, что $ rootScope - лучший вариант здесь. Спасибо, что установили меня прямо в правильном варианте использования для $ rootScope. –

Основываясь на вашем проводке, я предлагаю изменение класса тела в angular.Module.run, этот метод будет регистрировать задачу, которая будет выполняться, когда угловое приложение полностью загружено:

angular.module('myApp', []) 
    .run(['$scope', function($scope){ 

     var className = 'different-classes'; 
     angular.element(document.body).addClass(className); 

    }]);

поскольку ваши несколько страниц совершенно разные HTML-файлы, угловое приложение будет перезагружен каждый раз после перехода с одной страницы на другую

источник

2016-04-23 03:13:27 MarkoCen

Здесь, кажется, нет элегантного решения, не так ли? Спасибо за вашу помощь :) –

ну, это зависит от ваших требований, если вам просто нужно изменить класс тела только один раз на протяжении всего жизненного цикла страницы, это было бы самым легким в этом отношении. – MarkoCen

Давайте использовать директиву, как это:

.directive('bodyClasses', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var classes; 

      scope.$watch(function(scope) { 
       return scope.$eval(attrs.bodyClasses); 
      }, function(value) { 
       classes = value; 
       angular.element(document.body).addClass(value); 
      }); 

      // Remove body class when scope or directive destroyed. 
      scope.$on('$destroy', function() { 
       angular.element(document.body).removeClass(classes); 
      }); 
     } 
    }; 
});

Теперь, используйте эту директиву в отдельном HTML-страницы, как это:

<!-- remember, use single quote for string since we are evaluating it --> 
<div body-classes="'new-class another-class'"></div>

или

<span body-classes="'foo' {{someScopeVariable}}"></div>

В конкретной страницы или представления будет загружать эти классы будут добавлены к body тега , Таким образом, вы можете сохранить свой класс отдельно на каждой отдельной странице, и ваш основной тег body не будет мешать.

источник

2016-04-23 04:38:19

Вы можете настроить его на app.js

//app.js

angular.module('myApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute' 
]) 
.constant('config', { 
    user1:'class1', 
    user2:'class2' 
})

// главная.JS

angular.module('myApp').controller('MainCtrl', [ '$scope', 'config', 
    function ($scope, config) { 
     console.log(config.user1); 
    } 
]);

источник

2016-04-23 04:44:11 byteC0de

вместо использования $rootScope вы можете сделать слушателя для обнаружения изменения вида означает $routeChangeSuccess (я предполагаю, что вы использовали $routeProvider, чтобы изменить вид), и вы должны иметь родительский контроллер, в котором вы создаете свой слушатель

как:

var app = angular.module('myApp', ['ngRoute']); 

app.controller('parentController', function($scope, $route) { 
    $scope.$on('$routeChangeSuccess', function(newValue, oldValue) { 
     if (newValue !== oldValue) { 
      $scope.bodyClass = $route.current.viewClass; 
     } 
    }); 
});

в d провайдер хотел:

app.config(function($routeProvider) { 
    $routeProvider.when('/list',{ 
     controller: 'listController', 
     templateUrl: '/list.html', 
     viewClass: 'class1' 
    }).when('/details', { 
     controller: 'detailsController', 
     templateUrl: '/details.html', 
     viewClass: 'class2' 
    }).otherwise({ 
     redirectTo: '/list' 
    }); 
});

так что ваш HTML хотел:

<body ng-controller="parentController" class="commonClasses" ng-class="bodyClass ">

Можно посетить PLUNKER DEMO

источник

2016-04-23 08:04:48

Спасибо за ваше решение :) Будет ли я использовать это в моем основном модуле app.js, или я могу отключить его, чтобы сказать навигационный модуль? –

лучше использовать 'parentController' в вашем основном модуле. :) –

Изменить класс тегов тегов в Angular 1

ответ

Смежные вопросы