Question

我正在构建一个采用10行输入的模态，当点击关闭时随机化它们并且“应该”显示模态的一侧。通过其他研究，我发现我必须使用服务来使一切正常。但是，这个服务没有正确地改变我的var以改变我的ng-hide的真/假。

下面的一些代码

主要HTML

<body ng-controller="ModalDemoCtrl">
<my-modal-content></my-modal-content>
<button class="btn btn-small"
ng click="open(lg,'ModalInstanceCtrl')">Add</button>

<ul ng-controller="MainCtrl" >
    <button class="btn" ng-click="test()">Test</button>
<li ng-hide="toggle" ng-repeat="random in randomTeams">{{random.team}}</li>
</ul>




 <script src="js/vendor/angular.js"></script>
 <script src="js/vendor/angular-animate.js"></script>
 <script src="js/vendor/angular-ui.js"></script>
 <script src="app.js"></script>
 <script src="js/Modal.js"></script>
 <script src="js/setTeams.js"></script>
 <script src="js/randomizeTeamservice.js"></script>
</body>

我的模态含量

    <div class="modal-header">
    <h3 class="modal-title">Set Team Names</h3>
    </div>
    <div class="modal-body" ng-controller="MainCtrl">
    <div class="input-append" ng-repeat="team in teams | limitTo: 10">
    <input class="form-control" type="text" ng-model="team.team"  
placeholder="Team {{$index + 1}}" value="{{$index}}">  
</div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok(); 
add(this)">OK</button>
        <button class="btn btn-warning" type="button" ng-
click="cancel()">Cancel</button>
    </div>

</div>

模态控制器

app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
$scope.animationsEnabled = true;

$scope.open = function (size,controller) {

 $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller:   controller ,
  size: size,
  });
};
});

// Please note that $uibModalInstance represents a modal window (instance)  
dependency.
// It is not the same as the $uibModal service used above.

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, randomService) {

$scope.toggle = randomService.showTeams();

$scope.ok = function () {
$uibModalInstance.close({

}

);
$scope.toggle = false;
  console.log($scope.toggle);

};

$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});

最后服务

app.factory("randomService", function(){
var teams = [{},{},{},{},{},{},{},{},{},{}];
var randomTeams = teams.slice(0);
var showTeams = true;


 return{
  randomTeams: function(){
      return randomTeams;
  },
  teams: function(){
      return teams;
  },
  showTeams: function(){
      return showTeams;
  }
}

});

那为什么ng-hide不起作用？

Answer 1

问题解决了。移动了一些东西，但在这里。

将randomize函数移动到控制器并添加了一个getter，因此函数将检索toggle（true / false）值。

app.controller('MainCtrl', function($scope, randomService) {
$scope.teams = randomService.teams();
$scope.randomTeams = randomService.randomTeams();



$scope.toggle = function(){
    return randomService.getTeams();
}

$scope.add = function(team, show) {
for( var i = 0; i < 10; i++){
 $scope.teams.splice(i, 1, team.teams[i]);
}
  randomService.shuffle($scope.randomTeams);
    $scope.toggle(); 

};

});

在服务工厂中除了添加shuffle功能和getter功能外。我添加了一行代码，将showTeams从true更改为false。

app.factory("randomService", function(){
 var teams = [{},{},{},{},{},{},{},{},{},{}];
 var randomTeams = teams.slice(0);
 var showTeams = true;


 return{
  randomTeams: function(){
      return randomTeams;
  },
  teams: function(){
      return teams;
  },

  shuffle: function shuffle(array) {
  showTeams = false;
  var currentIndex = array.length, temporaryValue, randomIndex;

 // While there remain elements to shuffle...
  while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
 }

 return array;
  },
   getTeams: function(){
       return showTeams;

  },

 }


});

最后ng-hide="toggle:已更改为ng-hide="toggle()"

Angular Modal触发ng-hide / ng-show

1 个答案: