AngularJS

Question

好的，所以我对各种输入元素有以下指令。其中一些元素位于模态框上，因此当前方法并不能真正按照我的意愿工作，它应该在模态框打开之前应用它。

crtPromoDir.directive('ngFormatCurr', ['$filter', function($filter)
{
    function link(scope, element, attrs)
    {
        element.blur(function()
        {
            element.val($filter('currency')((element.val() || 0), '', 2));
        });
    };

    return {
        link: link
    };
}]);

所以基本上我怎样才能让它在每次更改时立即应用过滤器？

来自麦肯兹的解决方案：

crtPromoDir.directive('ngFormatCurr', ['$timeout', '$filter', function($timeout, $filter)
{
    return {
        link: function(scope, element, attrs)
        {
            $timeout(function()
            {
                element.val($filter('currency')((element.val() || 0), '', 2));
            });

            element.blur(function()
            {
                element.val($filter('currency')((element.val() || 0), '', 2));
            });
        }
    };
}]);

Answer 1

要使用过滤器进行初始化，只需更改您的代码，使过滤器在 link 函数中运行。我不会尝试在每个 keypress/change 上使用过滤器修改值，因为这会让用户感到沮丧。

已更新以在 $timeout 时进行初始化，以便在 angular 编译后应用过滤器。还添加了一个按键处理程序和代码，以便在按键两秒后应用过滤器。我不推荐这个，但它解决了您在用户键入时使用值过滤器的问题，在用户按键之后，过滤器将应用之前有两秒钟的延迟。

http://plnkr.co/edit/NqB12vgS3mWTTG4IliTW?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="angular.js@1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller = "cntrl">
    <h1>Hello Plunker!</h1>
    <input ng-model="val" ng-format-curr="" />
    <script>

      var crtPromoDir = angular.module("crtPromoDir",[]);
      var app = angular.module("cntrl",[]);

      app.controller("cntrl",function($scope){
        $scope.val = 2234;
      });

      crtPromoDir.directive('ngFormatCurr', ['$filter','$timeout', function($filter,$timeout)
      {
          function link(scope, element, attrs)
          {
              var promise;

              $timeout(function(){
                element.val($filter('currency')((element.val() || 0), '', 2));
              });


              element.keypress(function(){
                if(angular.isUndefined(promise)){
                  promise = $timeout(function(){
                    element.val($filter('currency')((element.val() || 0), '', 2));
                  },2000);
                }
                else{
                  $timeout.cancel(promise);
                  promise = undefined;
                }

              });

              element.blur(function()
              {
                element.val($filter('currency')((element.val() || 0), '', 2));
              });
          };

          return {
              link: link
          };
      }]);

      angular.bootstrap(document,["crtPromoDir","cntrl"]);

    </script>
  </body>

</html>

AngularJS - 立即应用指令，格式化货币

AngularJS - Apply directive instantly, formating currency

javascript

directive

input

filter