无法根据条件重新调用角度函数答案

【问题标题】：Can not re invoke an angular function based on conditions无法根据条件重新调用角度函数
【发布时间】：2016-10-23 15:02:42
【问题描述】：

这个想法是：
第 1 部分： 点击闭眼按钮：并转动闭眼按钮以睁眼。并显示密码。

第 2 部分： 点击睁眼按钮：并将睁眼按钮转动到闭眼。并隐藏密码。

HTML：

<input type="{{password_visible}}" class="form-control" style="height:40px;" placeholder="Password">
<a href="" ng-click="showPassword();"><span class="{{password_glyphicon}}" style="color:#7F7F7F" id="input_img"></span></a>

角度：

$scope.password_visible   = "password";
    $scope.password_glyphicon = "glyphicon glyphicon-eye-close";


    if($scope.password_visible === "password"){

        $scope.showPassword = function(){

            $scope.password_visible = "text";
            $scope.password_glyphicon = "glyphicon glyphicon-eye-open";

        };

    }else{

        $scope.showPassword = function(){

            $scope.password_visible = "password";
            $scope.password_glyphicon = "glyphicon glyphicon-eye-close";

        };

    }

问题是一旦我点击按钮并调用函数并完成part 1，我无法完成part 2

请指教

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

这是一个有效的解决方案。如果您在控制器中操作 css，那么您做错了。这完全没有棱角。

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <i class='glyphicon' ng-class="{'glyphicon-eye-open':!hideText, 'glyphicon-eye-close':hideText}" ng-click='hideText=!hideText'></i>
    <input type='password' ng-show='hideText' ng-model='useSameScopeObject'/>
    <input type='text' ng-show='!hideText' ng-model ='useSameScopeObject'/>
    <pre>{{useSameScopeObject}}</pre>
  </body>

https://plnkr.co/edit/hlUCCgv9tGrSovpxL2Bq?p=preview

【讨论】：

【解决方案2】：

你就不能这样吗？

$scope.showPassword = function(){
  if($scope.password_visible === "password"){
        $scope.password_visible = "text";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-open";  
  }else{
        $scope.password_visible = "password";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-close";
  }

};

【讨论】：

【解决方案3】：

它不起作用，因为您将函数保留在条件中，请将您的条件放入函数中，

$scope.showPassword = function(){
  if($scope.password_visible === "password"){
        $scope.password_visible = "text";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-open";  
  }else{
        $scope.password_visible = "password";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-close";
  }
};

DEMO

【讨论】：

【解决方案4】：

在您的代码中，当控制器加载时，它将匹配第一个条件，并为您能够实现的第一部分创建一个函数。

在函数内部尝试条件。

$scope.showPassword= function(){
 //Conditions and logic
}

【讨论】：