ng-show 不适用于 Ionic 框架
ng-show doesn't work with Ionic framework
所以我只是想制作一个按钮,它会根据用户是否登录而改变。
这是我想要的:
<ion-view view-title="Settings">
<ion-nav-buttons side="right">
<a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
</ion-nav-buttons>
出于某种原因,如果我没有登录,它只显示第二个按钮(登录按钮),如果我登录了,它根本不显示任何内容。
我什至直接将登录的 ng-show 设置为 false,将注销设置为 true,它仍然给了我相同的结果:
<ion-view view-title="Settings">
<ion-nav-buttons side="right">
<a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="true" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="false" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
</ion-nav-buttons>
将登录按钮的 ng-show 的值切换为 true,将注销按钮的值切换为 false,显示登录按钮。没有意义...这是我的 JS 代码:
.controller("settingsController", function($scope, $cordovaSQLite, Settings, $location) {
$scope.isLoggedOn = Settings.getLoggedOn();
$scope.signIn = function(form) {
console.log(Settings.logIn(form.email, form.password));
console.log($scope.isLoggedOn);
$scope.isLoggedOn = Settings.getLoggedOn();
// console.log($scope.isLoggedOn);
};
$scope.signOff = function() {
Settings.logOff();
};
});
请注意,这些是代码片段,因此您可能找不到所有结束标记。基本上我的问题是无论我对登录或注销按钮的 ng-show 做什么,无论我做什么,注销按钮(第一个按钮)都不会显示。我试过 ng-if 也产生了相同的结果。
谢谢。
嗯,看起来..<ion-nav-buttons side="left">
正在覆盖另一个..!
试试这个:
<ion-nav-buttons side="left" >
<button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
<button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>
所以我只是想制作一个按钮,它会根据用户是否登录而改变。 这是我想要的:
<ion-view view-title="Settings">
<ion-nav-buttons side="right">
<a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
</ion-nav-buttons>
出于某种原因,如果我没有登录,它只显示第二个按钮(登录按钮),如果我登录了,它根本不显示任何内容。 我什至直接将登录的 ng-show 设置为 false,将注销设置为 true,它仍然给了我相同的结果:
<ion-view view-title="Settings">
<ion-nav-buttons side="right">
<a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="true" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button ng-show="false" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
</ion-nav-buttons>
将登录按钮的 ng-show 的值切换为 true,将注销按钮的值切换为 false,显示登录按钮。没有意义...这是我的 JS 代码:
.controller("settingsController", function($scope, $cordovaSQLite, Settings, $location) {
$scope.isLoggedOn = Settings.getLoggedOn();
$scope.signIn = function(form) {
console.log(Settings.logIn(form.email, form.password));
console.log($scope.isLoggedOn);
$scope.isLoggedOn = Settings.getLoggedOn();
// console.log($scope.isLoggedOn);
};
$scope.signOff = function() {
Settings.logOff();
};
});
请注意,这些是代码片段,因此您可能找不到所有结束标记。基本上我的问题是无论我对登录或注销按钮的 ng-show 做什么,无论我做什么,注销按钮(第一个按钮)都不会显示。我试过 ng-if 也产生了相同的结果。
谢谢。
嗯,看起来..<ion-nav-buttons side="left">
正在覆盖另一个..!
试试这个:
<ion-nav-buttons side="left" >
<button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
Log On
</button>
<button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
Log Off
</button>
</ion-nav-buttons>