When clicking on link perform reload on div with Angular. ng-click, ng-include, controller

Question

When clicking on link perform reload on div with Angular. ng-click, ng-include, controller

Navigation

#1 by (1 votes)

1

Hello! I have this link:

<ul class="nav child_menu">
    <li><a href="graficos.html">Gráficos</a></li>
</ul>

Clicking the link should display grafico.html through ng-include :

<div ng-include="'graficos.html'"></div>

graficos.html:

<div ng-controller="graficoCtrl">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Line graph<small>Sessions</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                    //... mais código ...

As seen above, there is a controller (graphCtrl) and it loads a graphic in the canvas tag in the grafico.html file.

app.controller('graficoCtrl', function($scope){
    Chart.defaults.global.legend = {
        enabled: false
    };
    // mais código....

What I really want to do is to maintain interactivity on a single page, that is, by clicking on a link on the same page, a reload occurs on a particular < strong> div . A Single Page Application.

javascript angularjs angularjs-directives

asked by anonymous 20.05.2016 / 19:07

1 answer

How to know the contents of a foreign key to fill in another table? Filter reading emails from a date

score 1 · Accepted Answer

For this you can use ngRoute (there is the angular-ui-router, but this one is more complex).

In addition to the script reference:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>

You reference as dependency in your application:

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

Configure routes:

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'app/views/home.html',
        controller     : 'HomeCtrl',
   });
};

Uses the tag <div ng-view></div> and links with hash <a href="#/home">Home</a>

Source: link