javascript - Angular.js: Add a class to elements outside of the scope depending on the used route -


how can add class outside of scope? can see here want add class header, main , footer

<header class="{{pageclass}}"></header> <main class="{{pageclass}}" ng-view></main> <footer class="{{pageclass}}"></footer>

this routing , controller:

app.config(function($routeprovider) {      $routeprovider     .when('/chapter/:title', {         templateurl: 'article.html',         controller: 'article'     })     .when('/suche', {         templateurl: 'search.html',         controller: 'search'     })        .otherwise({         redirectto: '/search'     });  });  app.controller('article', function($scope) {     $scope.pageclass = 'normal'; });  app.controller('search', function($scope) {     $scope.pageclass = 'small'; });

now want add class 'normal' when user has opened article. if user goes search-page, class (i.e. 'small') should added.

so there set class every 3 tags (header, main , footer). difference kind of routing been used. hope explain try achieve.

there parent controller body tag have $scope.parent = {}; object have classname.

note

i've use $scope.parent = {}; because child controller can directly access classname doing $scope.parent.classname using javascript prototypal inheritance here

markup

<body ng-controller="parent">   <header ng-class="parent.classname"></header>   <main ng-class="parent.classname" ng-view></main>   <footer ng-class="parent.classname"></footer> </body>

code

app.controller('parent', function($scope) {     $scope.parent = {}; });  app.controller('search', function($scope) {     $scope.parent.pageclass = 'small'; });  app.controller('article', function($scope,) {     $scope.parent.pageclass = 'normal'; });

example plunkr


-

Comments

Post a Comment