Eu pensei que soubesse ou pelo menos tivesse entendido Angular, mas quando tentei criar uma função de acordo com um execício, surgiu uma dúvida, como eu associo funções passando parâmetros?
Como funciona o this?
Para tudo precisa do $scope?
Esse é o código que eu estou tentando criar uma função que dependendo da quantidade de caracteres, aparece uma mensagem no HTML:
<!doctype html><html lang="en">
<head><title>Lunch Checker</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles/bootstrap.min.css"><script src="js/angular.min.js"></script>
<script src="js/app.js"></script><style>.message { font-size: 1.3em; font-weight: bold; }
</style></head><body ng-app="LunchChecker"><div class="container" ng-controller="LunchCheckerController"><h1>Lunch Checker</h1><div class="form-group">
<input id="lunch-menu" type="text" placeholder="list comma separated dishes you usually have for lunch" class="form-control" ng-model="name" ng-keyup="displayNumeric();"></div>
<div class="form-group"> <button class="btn btn-default" ng-click="displayNumeric();">Check If Too Much</button></div><div class="form-group message"><!-- Your message can go here. -->
{{sayMessage()}} </div></div></body></html>
(function () {
use strict';
angular.module('LunchChecker', [])
.controller('LunchCheckerController', LunchCheckerController);
LunchCheckerController.$inject = ['$scope'];
function LunchCheckerController($scope) {
$scope.name = "";
$scope.totalValue = 0;
$scope.displayNumeric = function () {
var totalNameValue = calculateString($scope.name);
$scope.totalValue = totalNameValue;
console.log(totalNameValue)
$scope.sayMessage = function(totalNameValue) {
console.log(totalNameValue)
if(totalNameValue >= 3) {
return "Enjoy!";
} else {
return "Too much!";
}
};
};
function calculateString(string) {
var totalStringValue = 0;
var stringLength = string.length;
totalStringValue = stringLength;
return totalStringValue;
}
};
})();
Não aparece erro nenhum, isso é só para estudar, para me ajudar a entender funções e como funciona o$scope.
Eu tentei, criar uma função separada que checa se o total de caracteres é maior que o limite deve imprimir uma mensagem senão imprime outra, achei que era só colocar o totalNameValue como argumento e utilizaria no if, mas não está passando nada dessa forma:
Vou começar pelo $scope, você não precisa estar usando o inject daquela forma, o correto é assim:
Dessa maneira, quando é chamado o controller, o scope já está inserido. Qualquer dependência que vá ser usada no controller, service ou directive, o correto é passar daquela maneira mostrada no exemplo. primeiramente como string e depois como parâmetro para o controller.
para passar o valor como argumento, você pode mapear o input com ng-model (ng-model=“valor”) por exemplo e depois mapear o botão com ng-click (ng-click=“displayMessage(valor)”); o scope é seu escopo, quando você diz (ng-model=“valor”), no seu js vai ser $scope.valor e quando diz ((ng-click=“displayMessage(valor)”)) no seu js vai ser $scope.displayMessage(valor);
Lembrando que se você desenvolve um método com parâmetro em js, quando vai utiliza-lo ele deve ter parâmetro, se não o angular não vai o reconhecer
Eu não sei se fui suficientemente claro, qualquer ajuda a mais é só perguntar.
No tutorial que eu assisti, essa forma é por causa da minificação, parece que tem um problema de quando o arquivo é minificado:
LunchCheckerController.$inject = ['$scope'];
Eu segui todos esses passos que você descreveu e não funcionou, a minha dúvida era na criação de funções e quando chamar uma determinada função, principalmente em qual valor de argumento deve ser chamando no html.
Consegui pegar o valor atualizado da variável totalValue, com o console eu vi que era na função displayNumeric, como essa variável estava sendo declarada no inicio eu me confundi e chamei a função no lugar errado e por isso o botão não mudava a mensagem.
Outra duvida era se precisava ter$scope em tudo, já vi que não, é só quando precisa do valor {{valor}}, aí precisa criar a variável com $scope, então tirei $scope das minhas funções.
Se você usar o array de strings como parâmetro antes da função, você já vai estar corrigindo o problema da minificação. Esse é o atual modelo que o angular pede para ser trabalhado. E sim você está correta, não é necessário colocar scope nas funções, apenas naquelas que serão usadas na view. Nesse caso é possivel utilizar o this.funcao = function(){} e na view passar <span>{{ExemploController.funcao()}}</span>
ou <span ng-bind="ExemploController.funcao()"></span>
Mas o caso é mais coesão do código. Você estaria fazendo o controller executar a função e isso ficaria claro. tornaria mais fácil a manutenção. É uma questão de escolha