Javascript 双向绑定在AngularJS 1.x中不起作用

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

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

******

以下是代码：

HTML视图

---

附件fiddler将解释我是如何实现它的。在小提琴家里，我无法使双向装订工作。有人能帮我吗。在AngularJS 1.0.x中，你不能使用

ng mousedown

或

ng mouseup

，因为它在这个版本中没有实现。只要切换到AngularJS 1.4.x或更高版本，就可以像这样工作

切换到AngularJS的最新版本->

看法

---

更新 现在，如果您单击“显示”元素一次（单击确实会将其设置为活动状态，以便它可以侦听“键控向上”和“键控向下”事件），然后按下一个键，密码将显示1秒，如下图所示。逻辑现在放在一个指令中：

看法

---

嘿，我的问题不是关于ng mousedown和ng mouseup。而是关于我们何时关注按钮和按键。我想显示应该发生在指令上而不是控制器部分的密码。谢谢help@SrinivasNaidu嗯，那你为什么还要在你的控制器中添加这个逻辑呢？很抱歉，但我只是想展示一下这正在发生，我希望如此。不知何故错过了它。@SrinivasNaidu好的，请稍候，将在您的指令中使其工作。@SrinivasNaidu很棒。请仔细比较我的解决方案和您的项目，使其工作。您可以使其工作=）！

<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> 

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 = "*******";
          });
        }
    }

<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>

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 = "********";
  }
});

<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>

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);
      });
    }
  }
});