Error using a view for two controllers

Question

Error using a view for two controllers

Navigation

#1 by (0 votes)

0

I have a controller to add an object and it uses the view. addObject.html

I have another controller that is to edit this object, and when accessing it it fills the whole view addObject.html .

What would be different would be just the submit button that would depend on whether it was "Edit" or "Add"

>

I created a variable in the controller called $rootScope.buttonCtrl .

When accessing addObjetoCtrl the variable had value $rootScope.buttonCtrl = true;

And when accessing editObjetoCtrl the variable had value $rootScope.buttonCtrl = false;

And in the view I have

<button type="button" ng-click="addTarefa()" ng-show="buttonCtrl" 
        class="btn btn-default" ng-disabled="tarefa.titulo == null || 
        tarefa.descricao == null || cl.classe==null">
    Cadastrar
</button>

<button type="button" ng-click="editarTarefa()" ng-show="buttonCtrl == false" 
        class="btn btn-default" ng-disabled="tarefa.titulo == null || 
        tarefa.descricao==null || cl.classe==null ">
    Editar
</button>

But what happens is that view buttonCtrl is always true , so only the "Register" button " it's showing. What can it be?

angularjs html5

asked by anonymous 22.03.2017 / 16:46

1 answer

Function Check initial and final product Problem with Navbar

score 0 · Answer 1

I created a variable in the controller called $rootScope.buttonCtrl

Nop, you have created a variable in the root scope ( $rootScope ). Two problems:

This scope does not belong to the controller (the scope of the controller inherits from $rootScope );
Creating variables in $rootScope is considered a bad practice .

Among other possible causes, your problem may be the result of an isolated scope.

The functional example below illustrates the use of local scopes ( $scope ). Click Run to see it in action:

angular.module('myApp', [])
.controller('adicionarCtrl', function($scope){
  $scope.titulo  = "Adicionar"; 
  $scope.buttonCtrl  = true; 
})
.controller('editarCtrl', function($scope){
  $scope.titulo  = "Editar"; 
  $scope.buttonCtrl = false; 
})
;

.painel
{
  display:inline-block;
  width:200px;
  border:2px solid black;
  padding:10px 5px;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app='myApp'><scripttype="text/ng-template" id="tpl.html">
    {{titulo}}
    
    <button type="button" ng-click="addTarefa()" ng-show="buttonCtrl" class="btn btn-default">
        Cadastrar
    </button>

    <button type="button" ng-click="editarTarefa()" ng-show="!buttonCtrl" class="btn btn-default">
        Editar
    </button>
  </script>

  <div ng-include="'tpl.html'" ng-controller='adicionarCtrl'></div>
  <div ng-include="'tpl.html'" ng-controller='editarCtrl'></div>
</div>