нг-если не обновляется в соответствии с переменной

Question

Я начинаю с AngularJS и создаю простое приложение, чтобы выучить его,

В моем приложении у меня есть четыре вкладки: Список, Создать, Обновить и Удалить

Но я просто хочу показать вкладки Обновление и Удалить, если я нажму кнопку в разделе списка.

Я сделал фабрику, чтобы установить состояние вкладки в true или false. Когда я нажимаю кнопку, состояние изменяется, но вкладки не обновляются. Может ли кто-нибудь помочь мне, пожалуйста?

Вот моя фабрика вкладок:

angular.module('primeiraApp').factory('tabs', [TabsFactory])

function TabsFactory(){

   function show(owner, {
      tabList = false,
      tabCreate = false,
      tabUpdate = false,
      tabDelete = false
   }) {
      owner.tabList = tabList
      owner.tabCreate = tabCreate
      owner.tabUpdate = tabUpdate
      owner.tabDelete = tabDelete
   }

   return { show }
}

Вот мой контроллер:

angular.module('primeiraApp').controller('BillingCycleController',[
  '$http',
  'msgs',
  'tabs',
  BillingCycleController
])

function BillingCycleController($http,msgs,tabs){
    const vm = this
    const url = 'http://localhost:3003/api/billingCycles'

    vm.refresh = function (){
      $http.get(url).then(function(response){
        vm.billingCycle = {}
        vm.billingCycles = response.data
        tabs.show(vm,{tabList: true, tabCreate: true})
      })
    }

    vm.create = function(){
      $http.post(url,vm.billingCycle).then(function(response){
        vm.refersh()
        msgs.addSuccess('Operação realizada com Sucesso')
      }).catch(function(response){
        msgs.addError(response.data.errors)
      })
    }

    vm.showTabUpdate = function(billingCycle){
      vm.billingCycle = billingCycle
      tabs.show(vm, {tabUpdate : true})
      console.log("List: "+vm.tabList+"\nCreate: "+vm.tabCreate+"\nUpdate: "+vm.tabUpdate+"\nDelete: "+vm.tabDelete)
    }

    vm.showTabDelete = function(billingCycle){
      vm.billingCycle = billingCycle
      tabs.show(vm, {tabDelete : true})
      console.log("List: "+vm.tabList+"\nCreate: "+vm.tabCreate+"\nUpdate: "+vm.tabUpdate+"\nDelete: "+vm.tabDelete)
    }

    vm.refresh()
}

А где мой HTML:

<content-header name = "Ciclo de Pagamentos" small = "Cadastro"></content-header>

<section class="content">

  <div class="nav-tabs-custom" ng-controller= "BillingCycleController as bcCtrl">
    <ul class = "nav nav-tabs">

      <li ng-if= "bcCtrl.tabList">
        <a href data-target = "#tabList" data-toggle="tab">
          <i class = "fa fa-bars"></i> Lista
        </a>
      </li>

      <li ng-if= "bcCtrl.tabCreate">
        <a href data-target = "#tabCreate" data-toggle="tab">
          <i class = "fa fa-plus"></i> Incluir
        </a>
      </li>

      <li ng-if="bcCtrl.tabUpdate">
        <a href data-target = "#tabUpdate" data-toggle="tab">
          <i class = "fa fa-pencil"></i> Editar
        </a>
      </li>

      <li ng-if= "bcCtrl.tabDelete">
        <a href data-target = "#tabDelete" data-toggle="tab">
          <i class = "fa fa-trash-o"></i> Deletar
        </a>
      </li>
    </ul>

    <div class = "tab-content">
      <div class="tab-pane" id= "tabList"  ng-if= "bcCtrl.tabList" ng-include = "'billingCycle/list.html'" ></div>
      <div class="tab-pane" id= "tabCreate" ng-if= "bcCtrl.tabCreate" ng-include = "'billingCycle/form.html'"></div>
      <div class="tab-pane" id= "tabUpdate" ng-if="bcCtrl.tabUpdate" ng-include = "'billingCycle/form.html'"></div>
      <div class="tab-pane" id= "tabDelete" ng-if= "bcCtrl.tabDelete"  ng-include = "'billingCycle/form.html'"></div>
    </div>

  </div>
</section>

Вот что я получил в консоли

Когда я нажимаю Edit:

Когда я нажимаю Удалить:

Кто-нибудь может сказать, что я делаю неправильно?

Answer 1

Я решаю это.

Был файл с именем list.html это было так:

<div class="box-body" ng-controller = "BillingCycleController as bcCtrl">
  <table class = "col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tr>
      <th>Nome</th>
      <th>Mês</th>
      <th>Ano</th>
      <th>Ações</th>
    </tr>
    <tbody>
      <tr ng-repeat="billingCycle in bcCtrl.billingCycles">
        <td>{{billingCycle.name}}</td>
        <td>{{billingCycle.month}}</td>
        <td>{{billingCycle.year}}</td>
        <td class="table-actions">
          <button class = "btn btn-warning" ng-click="bcCtrl.showTabUpdate(billingCycle)"><i class="fa fa-pencil"></i></button>
          <button class = "btn btn-danger"  ng-click="bcCtrl.showTabDelete(billingCycle)"><i class="fa fa-trash-o"></i></button>
       </td>
      </tr>
    </tbody>
  </table>
</div>

Я только что удалил ng-controller = "BillingCycleController as bcCtrl" из первой строки, и проблема была решена. Это произошло потому, что мой tabs.html вызывал list.html, и, поместив ng-controller в list.html, я создал еще один экземпляр BillingCycleController.

После изменения мой источник получил следующее:

<div class="box-body" >
  <table class = "col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tr>
      <th>Nome</th>
      <th>Mês</th>
      <th>Ano</th>
      <th>Ações</th>
    </tr>
    <tbody>
      <tr ng-repeat="billingCycle in bcCtrl.billingCycles">
        <td>{{billingCycle.name}}</td>
        <td>{{billingCycle.month}}</td>
        <td>{{billingCycle.year}}</td>
        <td class="table-actions">
          <button class = "btn btn-warning" ng-click="bcCtrl.showTabUpdate(billingCycle)"><i class="fa fa-pencil"></i></button>
          <button class = "btn btn-danger"  ng-click="bcCtrl.showTabDelete(billingCycle)"><i class="fa fa-trash-o"></i></button>
       </td>
      </tr>
    </tbody>
  </table>
</div>

Спасибо всем, кто пытался мне помочь

Answer 2

используйте ng-show вместо ng-if.