Friday, 15 June 2012

javascript - angular active link navigation -


Angular Beginning Here I am trying to activate my link basically once upon a given page. In the examples, a lot was found, none of which worked, so it should be that I am doing wrong.

This is what I am trying (Controller):

  ('Homepunt'); $ Scope.isActive = function (route). ('HomePoint'). {Return route === $ location.path ();}}]);  

HTML:

  & lt; Li "ng-class" = "{active: isActive ('/') || isActive ('/ home')}" & gt; Home & lt; / Li & gt; & Lt; Li "ng-class" = "{active: isActive (about '/')} & gt; & Lt; / Li & gt; About & lt; Li "ng-class" = "{active: isActive ('/ contact')}" & gt; Contact & lt; / Li & gt;  

Application itself:

  var app = angular. Modules ('MyApp', ['NGNET', 'NGQQs', 'NGRSOSR', 'NGRUR config ([' $ routeProvider ',' $ locationProvider ', function ($ route provider, $ location provider) {$ routeProvider.,' NgSanitize ('/', 'NgTouch', 'template', 'ng-token-at']). ('/ Home', {templateUrl: 'home.html', administrator: 'homecatal'}) .When ('/', { TemplateUrl: 'home.html', Controller: 'Homecatalog'}). ('/ (' / About ', {templateUrl:' about.html ', Controller:' AboutCtrl '}). Otherwise ({redirectTo:' contact ' ('Enable: trueBase: false});}] ,' template ':' contact.html ',' Controller: 'contact' Ctrl)} ./ '}); $ LocationProvider.ht Ml5Mode ({enabled: trueBase: false} Code>  

So no matter where I am located, the code does not do anything with errors in the ng-class console, however if I do it for home

  • ng-class "=" {active: true} "& gt; P> Then I get an active class on my link, and this output is:

      
  • ng-class = "{active: true}" class = "active"> ; Home & lt; / Li & gt;
  • What am I doing wrong here? Why does it work so that it should be activated, as it should?

  • You can not logic to check your inside HomeCtrl Active link because it is one of the routes when another route loads so no HomeCtrl is not loaded.

    Should be a defined controller outside the NG-view, such as RootCtrl . The is activated function should be added to it.

    Because the child's scope will have access to the parents' scope, so you can generally use the isActive in the child's thoughts.

    Update: html

      & lt; Body ng-controller = 'RootCtrl' & gt; & Lt; Div ng-view & gt; & Lt; / Div & gt; & Lt; / Body & gt; Add the isActive function to   

    RootCtrl .


    No comments:

    Post a Comment