Question

Ionic选项卡，标签的根HTML有“RootTabCtrl”，“Tab1”（“Tab1_Ctrl”）有一个表单，其他标签是禁用。

用户在Tab1上提交表单
Tab1控制器功能启动。
Controller Function调用外部函数（不在控制器中）。
外部函数触发器，执行承诺
在承诺“结果”中，处理返回的数据
如果返回的数据中的X为true，则触发“RootTabCtrl”函数以启用其他禁用的选项卡。
我可以跟踪控制台消息，触发每一步。

除了以下奇怪的行为之外，这一切都有效。 “RootTabCtrl”不启用禁用的选项卡，直到用户第二次单击表单提交...即使我看到控制台消息说它在RootTabCtrl函数的（最后）。我在第一次点击时看到了所有相同的控制台消息 - 但是第二次是禁用的标签再次启用时。

如果我在步骤4中将第6步移到promise之后，并在第3步之后（在promise之前）将其放入，则第一次单击时将启用所有选项卡。但是，这不再考虑X的值来确定是否应该重新启用其他选项卡。

我能找到或不知道会导致这种情况的是什么？

app.js：

 .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    controller: 'TabsCtrl'
  })

  // Each tab has its own nav history stack:

  .state('tab.tab1', {
    url: '/map',
    views: {
      'tab-1': {
        templateUrl: 'templates/tab-1.html',
        controller: 'tab1Ctrl'
      }
    }
  })

控制器：

.controller('TabsCtrl', function($scope,$rootScope,constants) {
  $scope.constants = constants ;
  $scope.tabControl = { 
    disableRides : true,
    disableBikes : true,
    disableTransit : true
  }

  var refreshFinalizer = $rootScope.$on('updateTabsRefresh', function (event, data) {
    console.log("Refresher 1") ;
     $scope.tabControl.disableTab2 = false;
     $scope.tabControl.disableTab3 = false ;
     console.log("Refresher 2") ;
  });

  $scope.$on('$destroy', function () {
    console.log("Destroy") ;
    refreshFinalizer ();
  });
})

.controller('tab1Ctrl', function($scope,$rootScope) {

  $scope.setInfo= function() {
    getGoogle(document.getElementById('form_data').value,0);
  }
  $scope.enableTabs = function(type) {
    console.log("Here enableTabs1") ;
    $rootScope.$broadcast('updateTabsRefresh');
    console.log("Here enableTabs2") ;    
  }
})

Tab1有一个表单，点击后，它执行$ scope.setInfo。然后getGoogle（）在一个外部JS函数，它调用谷歌地图，如果特定数据X为真，然后使用tab1Ctrl $ scope.enableTabs（）启用所有其他选项卡：

    function getGoogle(userInfo,clear) {
        console.log("setInfo 1") ;
        geoCoder.geocode({'address': userInfo}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
              // extra code removed
              startPointSet = 1;
           // tab1Ctrl html has id of "Tab1" 
angular.element(document.getElementById('Tab1')).scope().enableTabs();
              /* alternative method, worked the same as previous line but with same problem 
              var $sBody = angular.element(document.body) ;
              var $sRootScope = $sBody.injector().get('$rootScope') ;
              $sRootScope.$broadcast('updateTabsRefresh') ;
              */
              console.log("setInfo 2") ;
            }
          } else {
            // extra code removed
            console.log(response) ;
          }
        });
      }
    }

所有上述工作......除了调用enableTabs（在谷歌响应中），即使它正确调用enableTabs，我可以看到在enableTabs中触发的console.log消息 - 其他选项卡不在t“启用”，直到第二次单击表单按钮（然后我再次看到所有控制台消息）。我尝试了两种不同的方法，从getGoogle（）中，两者完全相同 - 第一次点击正确解雇了所有函数，但是标签没有启用。第二次单击触发了所有功能，然后启用了选项卡。

Answer 1

尝试上一个answer。你在使用$ http电话吗？如果是这样的话，我从来没有真正做到这一点，所以似乎其他东西可能是根本原因。

<强>更新

如何为此GetGoogle函数调用创建Angular Service。然后你仍然会在角度内，并可以注入$ rootScope和你需要的任何其他东西。您需要将此服务注入tab1Ctrl（下面的myGoggleService）。我也可能只是将表格传回ng-submit：

HTML

ng-submit="setInfo(formNameGoesHere)"

控制器

.controller('tab1Ctrl', function($scope, $rootScope, myGoogleService) {
    $scope.setInfo = function(form) {
        myGoogleService.getGoogle(form);
    }
    $scope.enableTabs = function(type) {
        console.log("Here enableTabs1");
        $rootScope.$broadcast('updateTabsRefresh');
        console.log("Here enableTabs2");
    }
});

服务：如果您还没有创建任何指令，您需要在app.js中注册它，就像您拥有的任何指令一样，并将它们像普通控制器一样放在index.html页面中。

.service('myGoggleService', [ '$rootScope', function ($rootScope) {
  this.getGoogle = function(userInfo,clear) {
    console.log("setInfo 1") ;
    geoCoder.geocode({'address': userInfo}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $rootScope.$broadcast("updateTabsRefresh");
        } else {

        }
    });
  }
}}]);

我确实从上面复制了你的代码然后删除了一些额外的东西只是为了得到重点。显然无法运行代码，因此可能会出现一些错误或需要进行轻微更改，但希望这会让您接近。

从外部JS

1 个答案: