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

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

来自mccainz的解决方案：

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

要使用过滤器进行初始化，只需更改代码，使过滤器在链接功能中运行。我不会尝试在每次按键/更改时使用过滤器修改值，但这会让用户感到沮丧。

更新为初始化$ timeout，以便在角度编译后应用过滤器。还添加了一个按键处理程序和代码，以便在按键两秒后应用过滤器。我不建议这样做，但是它解决了您在用户键入时使用值过滤器的问题，在用户按键之后给出了两秒钟的延迟，然后才会应用过滤器。

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 - 立即应用指令，形成货币

1 个答案: