在我的离子应用上,我有一个按钮的视图。当你点击这个按钮时,一个玩家列表将以模式被提供,当点击一个玩家的名字时,所选择的玩家的名字应该被显示在页面上,并且该按钮应该被隐藏。 下面是codepen的相同 - http://codepen.io/mradul/pen/vNywqG 然而,当我在模态上选择一个值(玩家名称)时,范围变量被更新(因为它打印在控制台上),但是更改不会反映在页面上。 HTML -
<ion-header-bar class="bar-positive bar-header">
<h1 class="title">Selected Player</h1>
</ion-header-bar>
<ion-content>
<script id="select-player.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose Player</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="player in getPlayerList().players" ng-click="closeModal(player)">
{{player}}
</ion-item>
</ion-list>
</ion-content>
</div>
</script>
<br/><br/>
<div id="player">
{{sc.player}}
<div class="row">
<a class="button" ng-click="openModal()" ng-show="sc.player.playerName == null">Set player</a>
<div ng-hide="sc.player.playerName == null">
<div class="col col-33 " > {{sc.player.playerName}}</div>
</div>
</ion-content>
JS -
angular.module('ionicApp',['ionic']).controller('scoringController', function ($scope, $ionicModal) {
$scope.player = {playerName:""};
$scope.getPlayerList = function() {
console.log("getting player list");
return {
"players": [
"Mradul",
"JAin",
"Phunsuk Wangdu",
"Hulk"
]
};
};
$ionicModal.fromTemplateUrl('select-player.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
})
$scope.openModal = function() {
console.log("Setting model open ");
$scope.modal.show()
}
$scope.closeModal = function (playerName) {
$scope.player.playerName = playerName;
//$scope.activePlayers[0] = playerName;
console.log("Player Set ", $scope);
console.log("model closed");
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
});
玩家最初是一个原始(字符串),但我通过拥有一个属性 - playerName将其改变为一个对象。可能是我没有做对。请建议如何正确更新父范围变量。我可能错过了一些非常基本的东西。您更改后
它的工作。我在html代码的顶部有这样一行代码 -,它并未显示在问题中。我已经把别名作为控制器。所以试图使用sc.variableName访问范围变量。我想我只是摆脱'作为sc'。非常感谢。 –
exe