3

据我所知，这可能更像是一个 AngularJS 问题，而不是一个特定于 Ionic 的问题。我的一个视图中有一个按钮：

<button class="button button-clear button-block button-positive" ui-sref="register">
    Register
 </button>

在我的控制器中，我有一个从本地存储中获得的变量，它要么是真要么是假，并且必须隐藏，具体取决于值是：

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {

  // Check if the user has already requested a register, and if true, hide
  // the 'Register' button
  if ($localstorage.get("registrationRequested", false) === true) {
    // How do I do this?
  }

}]);

现在第一个问题可能是，从我的控制器中操纵 dom 是否是最佳实践？如果没有，我在哪里以及如何做？如果它在我的控制器中做得很好，那么我如何引用该按钮并隐藏它？

4

4 回答 4

9

将ng-hide指令添加到您的按钮标签：

<button ng-hide=registered class="button button-clear button-block button-positive" ui-sref="register">
    Register
</button>

在您的 JS 文件中，在您的$scopeto中声明此值false并将其设置true为隐藏按钮：

app.controller('loginController', ['$scope', '$localstorage',
    function($scope, $localstorage) {
        $scope.registered = false;

        // Check if the user has already requested a register, and if true, hide
        // the 'Register' button
        if ($localstorage.get("registrationRequested", false) === true) {
            $scope.registered = true;
        }
    }
]);
于 2015-08-13T11:49:17.103 回答
3

执行以下操作：

<button class="button button-clear button-block button-positive" ui-sref="register" ng-show='showBtn'>
Register

在控制器中：

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {
  if ($localstorage.get("registrationRequested", false) === true) {
     $scope.showBtn = true;
  }
  else{
     $scope.showBtn = false;
  }
}]);
于 2015-08-13T11:52:36.517 回答
0

您应该使用data-ng-hide隐藏或显示。将其设置为之后，true或者false您必须像这样应用范围设置： $scope.$apply();

于 2016-10-04T07:32:43.500 回答
-1

您也可以使用 ng-if 将按钮显示为：

<button class="button button-bar button-positive" ng-if="resgisterBtn" ui-sref="register">Register</button>

在控制器中：

 app.controller('loginController', ['$scope', '$localstorage',
      function($scope, $localstorage) {
    if ($localstorage.get("registrationRequested", false) === true) {
         $scope.resgisterBtn = true;
      }
      else{
         $scope.resgisterBtn = false;
      }
    }]);

ng-show 和 ng-if 之间的区别是 ng-show 将使元素在 DOM 中保持活动状态，但 ng-if 会相反

于 2015-08-13T12:47:55.703 回答