Question

以下方法有效......但是，只有将$ timeout添加到tabList（）函数时才会这样做。 ng-init在DOM渲染之前执行，因此document.getElementById（＆＃39;＆＃39;）将以未定义的形式返回。我必须强制延迟1到2秒的计时器，直到DOM加载后才附加元素。这不是最佳的，但确实有效。我正在寻找另一种更清洁且不依赖于延迟执行的方法。

angular.module('starter.controllers', [])

.constant('constants', {
   tabColors: {
     curID:0,
   },
})

.controller('TabsCtrl', function($scope,Tabs,constants) {  
  $scope.constants = constants; 
  $scope.tabList = function() {
        var tID = $scope.constants.tabColors ;
    console.log(tID.curID) ;
    if (tID.curID) {
        $timeout(function() {
        document.getElementById('bike_tabItem_'+tID.curID).style.color = 'green' ;
        document.getElementById('bike_tabItem_'+tID.curID).style.color = 'black' ;
      },1000) ;
    }
  }
})

.controller('TabDetailCtrl', function($state,$scope,$stateParams,Tabs,constants) {
  $scope.constants = constants; //make it available constants on html
  $scope.itemSelect = function(thisID) {
    $scope.constants.tabColors.oldID = $scope.constants.tabColors.curID ;
    delete $scope.constants.tabColors['tabID_'+$scope.constants.tabColors.curID] ;
    $scope.constants.tabColors.curID = thisID ;
    $scope.constants.tabColors['tabID_'+thisID] = 'green' ;
  }
})

//在Tab.html上的HTML中：

<ion-item cache-view="false" id="tab_tabItem_{{tab.tabID}}" ng-init="tabList()">

//在Tab-Detail.html上的HTML中

<button id="tab_button" class="button button-small button-outline button-positive" ng-click="itemSelect({{tab.tabID}});">
Select this item
</button>

另外，调用tabList（）的另一种方法是： ng-init="tabList('{{tab.tabID}}')"

这为您提供了一种通过ng-init传递值的方法，与上面的调用不同，它可以为您提供更好的控制，而无需定义全局变量。虽然你仍然需要一个全局的上述跟踪哪个元素变为绿色，然后你可以在将新元素设置为绿色之前将其设置为黑色。

Answer 1

正如AngularJS文档中所述，您应该避免使用ng-init。

ngInit的唯一合适用途是用于别名ngRepeat的特殊属性，如下面的演示所示。除了这种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。

要在控制器之间传递变量，您可以使用provider。

使用ng-init调用控制器函数并在控制器

1 个答案: