Error using a view for two controllers

Question

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 buttonhole that would depend on "Edit" or "Add"

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

In which to access the addObjetoCtrl the variable had value $rootScope.buttonCtrl = true;

And where to access the 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 in view the value of buttonCtrl is always being true, so only the "Register" button is showing up. What can be?

Answer 1

I created a variable in the named controller $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);
• The creation of variables in the $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 on Execute 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>
<div ng-app='myApp'>
  <script type="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>