Controladora envia modelo para outra na View | AngularJS: crie webapps poderosas

2
respostas

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Dados inconsistentes? Precisamos removê-los ou alterá-los! e atividade Removendo e editando fotos

por Eduardo Gonçalves dos Santos

| 335.3k xp | 83 posts

Na aula foi utilizado Rota intermediando a comunicação entre fotos-controller e foto-controller. Mas no meu teste, não quero utilizar Rota entre essa comunicação.

<!-- public/partials/principal.html -->
        <a class="btn btn-primary btn-block" href="/fotos/edit/{{foto._id}}">
            Editar
        </a>

Há como um controlador enviar um modelo para outro controlador ao se clicar no botão? Algo do tipo:

<div ng-controller="FotosController">
   <div ng-repeat="foto in fotos">
        <button class="btn btn-primary btn-block" ng-click="FotoController.EditarFoto(foto)">
            Editar
        </button>
   </div>
</div>
<div ng-controller="FotoController">
   <form>
          <h1>{{foto.titulo}}</h1>
   </form>
</div>

//public/js/controllers/foto-controller.js
angular.module('alurapic').controller('FotoController', function($scope) {

    $scope.EditarFoto= function(foto123) {
    $scope.foto=foto123;
    };
});

2 respostas

por Instrutor

| 619.1k xp | 623 posts

Instrutor

30/05/2018

Olá, Eduardo!

A ideia do AngularJS é que os Controllers tenham seus escopos isolados.

O que você pode fazer é aninhá-los. O escopo filho tem acesso ao escopo pai. O que você pôr em FotosController conseguirá acessar em FotoController.

Exemplo:

<div ng-controller="FotosController">
    <div ng-repeat="foto in fotos">
        <button class="btn btn-primary btn-block" ng-click="editarFoto(foto)">
            Editar
        </button>
    </div>
    <div ng-controller="FotoController">
       <form>
              <h1>{{tituloEncurtado}}</h1>
       </form>
    </div>
</div>

//public/js/controllers/fotos-controller.js
angular.module('alurapic').controller('FotosController', function($scope) {
    $scope.editarFoto = function (foto123) {
        $scope.foto = foto123;
    };
});

//public/js/controllers/foto-controller.js
angular.module('alurapic').controller('FotosController', function($scope) {
    $scope.tituloEncurtado = $scope.foto.titulo.substr(0, 3);
});

Referência: https://docs.angularjs.org/guide/controller#scope-inheritance-example

por Instrutor

| 619.1k xp | 623 posts

Instrutor

30/05/2018

Outra coisa que você poderia fazer é isolar a sua lógica em um serviço.

Inclusive, o pessoal costuma a trabalhar com a sintaxe controllerAs, que isola até mesmo Controllers aninhados.