3

Ayuda, no puedo hacer funcionar ng-click en angularjs dashboard template

Específicamente <button ng-click="alert()">OK</button>

piedad no se mucho sobre web programming

main.html

  <div class="card" ng-controller="trafficDemoCtrl">
    <div class="card-body">
      <div class="row">
        <div class="col-sm-5">
          <h4 class="card-title mb-0">Pressure</h4>
          <div class="small text-muted">August 2019</div>
        </div>
        <!--/.col-->
        <div class="col-sm-7 d-none d-md-block">
          <button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
          <div class="btn-group btn-group-toggle float-right mr-3" data-toggle="buttons">
            <label class="btn btn-outline-secondary">
               <input type="radio" name="options" id="option1" autocomplete="off"> Day
               <button ng-click="alert()">OK</button>  
            </label>
            <label class="btn btn-outline-secondary active">
              <input type="radio" name="options" id="option2" autocomplete="off" checked> Last 12
            </label>
            <label class="btn btn-outline-secondary">
              <input type="radio" name="options" id="option3" autocomplete="off"> Year
            </label>
          </div>
        </div>
        <!--/.col-->
      </div>
      <!--/.row-->
      <div class="chart-wrapper" style="height:300px;margin-top:40px;">
        <canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="false" chart-series="series" chart-click="onClick" chart-options="options" chart-colors="colors" height="300"></canvas>
      </div>

main.js

angular.module('app').controller('trafficDemoCtrl', trafficDemoCtrl)
trafficDemoCtrl.$inject = ['$scope', '$window'];
function trafficDemoCtrl($scope,$window){

  function random(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

  var elements = 12;
  var data1 = [];
  var data2 = [];
  var data3 = [];
  var data4 = [];

   for (var i = 0; i <= elements; i++) {
    data1.push(random(50,200));
    data2.push(random(80,100));
    data3.push(147);
    data4.push(686);
  }

  $scope.alert=function () {
    $window.alert('Hello Guys');
  };

$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  $scope.series = ['Current', 'Previous', 'Low', 'High'];
  $scope.data = [ data1, data2, data3, data4];
  $scope.colors = [{
    backgroundColor: convertHex(brandInfo,10),
    borderColor: brandInfo,
    pointHoverBackgroundColor: '#fff'

  }, {
    backgroundColor: 'transparent',
    borderColor: brandSuccess,
    pointHoverBackgroundColor: '#fff'
  },{
    backgroundColor: 'transparent',
    borderColor: brandDanger,
    pointHoverBackgroundColor: '#fff',
    borderWidth: 1,
    borderDash: [8, 5]
  },{
    backgroundColor: 'transparent',
    borderColor: brandDanger,
    pointHoverBackgroundColor: '#fff',
    borderWidth: 1,
    borderDash: [8, 5]
  }];
  $scope.options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false,
        },
        ticks: {
          callback: function(value) {
            //return value.charAt(0);
            return value;
          }
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          maxTicksLimit: 5,
          //stepSize: Math.ceil(250 / 5),
          stepSize: Math.ceil(150),
          //max: 250
        }
      }]
    },
    elements: {
      point: {
        radius: 0,
        hitRadius: 10,
        hoverRadius: 4,
        hoverBorderWidth: 3,
      }
    },
  }
}

código fuente

código funcionando aquí

2 respuestas 2

2

Falta cerrar todos los <input type="radio" />

<input type="radio" name="options" id="option1" autocomplete="off" /> Day
<button ng-click="alert()">OK</button> 
7
  • la sintaxis correcta se supone que es <input type="radio">
    – asterix
    el 21 ago. 2019 a las 13:31
  • Debes cerrarlo @asterix, si no queda el button dentro y por eso no funciona el click!
    – sioesi
    el 21 ago. 2019 a las 13:32
  • de todas formas eso no soluciona el problema. Estoy editando esto github.com/coreui/coreui-free-bootstrap-admin-template
    – asterix
    el 21 ago. 2019 a las 13:33
  • @asterix que raro que no funcione, puedes agregar el código para hacer una prueba?
    – sioesi
    el 21 ago. 2019 a las 15:17
  • 1
    la marqué pero tengo pocos puntos, no me deja.
    – asterix
    el 21 ago. 2019 a las 15:33
2

No debe estar cargado bien el Javascript.

Tienes doble punto (error de sintaxis) al definir el controlador:

angular.module('app')..controller('trafficDemoCtrl', trafficDemoCtrl)
1
  • Cierto, pero fue un error de copy paste. El código está bien en esa parte. Al final funcionó, pero solo era una prueba para probar el ng-click, porque lo que la verdad me interese que funcione es agregandolo dentro de <input ng-click="function()">. Gracias i.imgur.com/I5Yfafo.jpg
    – asterix
    el 21 ago. 2019 a las 14:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.