两种方式绑定在 AngularJS 1.x 中不起作用

Question

我正在以可以在多个页面中访问的方式实现指令。我的要求是，当我按住任何键时（截至目前），我需要显示密码。密码详细信息将来自控制器。我需要更新指令中的密码。

在 keydown 事件中，我想将密码显示为 hello，在 keyup 上，我想将密码显示为 ********。

下面是代码：

HTML 视图

<div ng-app="myApp" ng-controller="Ctrl1">
   <a class="f-mrgn-left-4px" 
      key-hold 
      password="statusMessage" 
      generatedpassword="selfgeneratedpassword" 
      tabindex="0" 
      ng-mousedown="ShowPassword()" 
      ng-mouseup="HidePassword()">Show</a>
   <span>{{selfgeneratedpassword}}</span>
</div> 

JavaScript

function Ctrl1($scope) {
    $scope.selfgeneratedpassword = '******';
    $scope.statusMessage = "Password";

    $scope.ShowPassword = function () {
    console.log('show passwo', $scope.statusMessage);
        $scope.selfgeneratedpassword = $scope.statusMessage;
    }

    $scope.HidePassword = function () {
      $scope.selfgeneratedpassword = "********";
    }
}

angular.module('myApp', []).directive('keyHold', function() {
    return {
        restrict: 'A',
        scope: {
            'password': '=',
            'generatedpassword': '='
        },
        link: function(scope, element, attrs) {
                    console.log('self generated password', scope.password,scope.generatedpassword, element);               
          element.bind('keydown', function () {           
            $timeout(function () {
                console.log('after timeout');
                scope.selfgeneratedpassword = scope.password;
            }, 100);
          });

          element.bind('keyup', function () {
             scope.generatedpassword = "*******";
          });
        }
    }

附加的提琴手将解释我是如何实现它的。 Fiddler Link。在提琴手中，我无法使两种方式绑定工作。任何人都可以帮我解决这个问题。我为此浪费了一天的时间。

Answer 1

您不能在 AngularJS 1.0.x 中使用 ng-mousedown 或 ng-mouseup，因为它没有在这个版本中实现。只需切换到 AngularJS 1.4.x 或更高版本，使其像在这个 Demo Fiddle 中一样工作。

切换到最新版本的AngularJS -> https://github.com/angular/angular.js/releases

查看

<div ng-app="myApp" ng-controller="MyCtrl">
  <a class="f-mrgn-left-4px" 
     tabindex="0" 
     ng-mousedown="ShowPassword()" 
     ng-mouseup="HidePassword()">Show</a>
  <span>{{selfgeneratedpassword}}</span>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.selfgeneratedpassword = '******';
  $scope.statusMessage = "Password";

  $scope.ShowPassword = function() {
    $scope.selfgeneratedpassword = $scope.statusMessage;
  }

  $scope.HidePassword = function() {
    $scope.selfgeneratedpassword = "********";
  }
});

---

更新

现在，如果您单击“显示”元素一次（单击确实将其设置为活动状态，因此它可以监听“keyup”和 keydown”事件）并且您按下一个键，密码将显示 1 秒钟，如下所示Demo fiddle。逻辑现在放在指令中：

查看

<div ng-app="myApp" ng-controller="MyCtrl">
  <a class="f-mrgn-left-4px" tabindex="0" 
      key-hold 
      password="statusMessage" 
      generatedpassword="generatedpassword">Show</a>
  <span>{{generatedpassword}}</span>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.generatedpassword = '******';
  $scope.statusMessage = "Password";
});

myApp.directive('keyHold', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      'password': '=',
      'generatedpassword': '='
    },
    link: function(scope, element, attrs) {
      element.bind('keydown', function() {
          scope.generatedpassword = scope.password;
          scope.$apply();
      });

      element.bind('keyup', function() {
       $timeout(function () {
          scope.generatedpassword = "*******";
          scope.$apply();
        }, 1000);
      });
    }
  }
});