Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
Como adicionar funções (ou métodos) ao seu controller AngularJSQuantidade de visualizações: 2150 vezes |
|
Nesta dica mostrarei como adicionar comportamento ao seu controller AngularJS, ou seja, adicionar funções ou métodos para acessar e/ou modificar as variáveis contidas no escopo. Para este exemplo criaremos um controller chamado "VolumeTV". Este controller terá uma variável chamada "volume" e dois botões para aumentar ou diminuir o volume. Note que, tanto a variável quanto as duas funções são colocadas no $scope para facilitar o acesso destes a partir da view. Veja o exemplo completo, sem usar AngularJS CLI nem TypeScript, somente JavaScript e HTML: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller VolumeTV
app.controller('VolumeTV', function ($scope){
// define o volume inicial
$scope.volume = 5;
// função para aumentar o volume
$scope.aumentarVolume = function(){
$scope.volume++;
};
// função para diminuir o volume
$scope.diminuirVolume = function(){
$scope.volume--;
};
});
</script>
<div ng-app="MinhaApp" ng-controller="VolumeTV">
<h1>Volume atual: {{volume}}</h1>
<button ng-click="aumentarVolume()">Aumentar Volume</button>
<button ng-click="diminuirVolume()">Diminuir Volume</button>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
React.js - Aprenda a desenvolver aplicações React diretamente no HTML, sem usar a ferramenta create-react-app Java - Como definir a cor para o contexto de desenho usando o método setColor() da classe Graphics do Java |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
