Question

我正在开发一个使用typescript和angular来生成动态网页内容的项目。目前，我的工作是将输入字段格式化为货币，这在简单的javascript（带有角度）中很简单，但我需要在typescript中进行，这会出现一些问题。这是我的指令（根据建议的另一个堆栈溢出答案，我将其格式化为类）

namespace incode.directives.label {
    interface IScope extends ng.IScope {
        amount: number;
    }
    export class IncodeCurrencyInputDirective implements ng.IDirective {
        restrict ='A';
        public require: 'ngModel';
        public scope: Object;
        replace = true;
        public link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;


        constructor(private $filter: ng.IFilterService) {
            this.scope = {
                amount: '='
            };
            this.link = (scope: IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctlr: any, $filter: ng.IFilterService) => {
                //element.bind('focus',
                //    function () {
                //        element.val(scope.amount);
                //    });
                element.bind('input',
                    function () {
                        scope.amount = element.val();
                        scope.$apply;
                    });
                element.bind('blur',
                    function () {
                        element.val($filter('currency')(scope.amount));
                    });

            }
        }




        public static factory(): ng.IDirectiveFactory {
            var directive = ($filter) => new IncodeCurrencyInputDirective($filter);
            directive.$inject = ['$filter'];
            return directive;
        }


    }

    angular.module('incode.module')
        .directive('ixCurrency', incode.directives.label.IncodeCurrencyInputDirective.factory());
}

以及使用它的模板

<md-input-container layout-fill class="number-range">
        <input placeholder="From"
               type="text"
               name="from"
               ix-currency
               amount="0.00"
               precision="{{rangeController.precision}}"
               ng-model="rangeController.Bucket.RangeFilterFromString"/>
</md-input-container>

目前，脚本会在模糊时生成错误：TypeError: cloneConnectFn is not a function这似乎是角度使用的非常低级别的函数，并且通常不会产生此错误。非常感谢您提供的任何见解！

编辑：由于我知道很多角大师从未接触过打字稿，所以我会附加已编译的javascript的pastebin，以防http://pastebin.com/NnTLqauL

Answer 1

我弄明白了，不知道为什么它正确地给了我那个错误，但问题的根源是打字稿和角度之间的范围错误传达。你会注意到我有这条线

element.val($filter('currency')(scope.amount));

在上面的'blur'绑定中。我以这种方式引用过滤器的原因是因为如果您编写this.$filter，则typescript会对其进行编译，即使它在对象内部，this也会引用window而不是$filter。对象，所以element.bind('blur', () => { element.val(this.$filter('currency')(scope.amount)); });超出了范围。解决方案是使用lambda函数来欺骗作用域，如下所示：

this

始终注意body { background-color: #efefef; font-family: sans-serif; text-align: left; padding: 20px 0 0 20px; } .mainScr { max-width: 1500px; margin: 1px; } .mainInfo { background-color: #D4FCD5; min-width: 495px; max-width: 1470px; min-height: 100px; border: 1px double green; } .screenParts { vertical-align: top; width: 49%; max-width: 730px; min-width: 495px; min-height: 450px; border: 1px solid white; background: #F7E7C4; margin: 1px; display: inline-block; } .displayText { text-align: center; font-size: 0.8em; line-height: 0.75em; margin: 0.5em; } .graphicsPanel { width: 100%; height: 66%; border: 1px solid blue; background: lightblue; display: table; text-align: center; } .displayValues { /*this combination works better along x, but not good along y*/ position:relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(+50%); /*transform: translateX(-50%) translateY(+600%);*/ /* this combination keeps target in the middle of the screen! position:absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%;*/ }点（对我而言似乎非常困难），你应该没事。

使用$ filter时，cloneConnectFn不是函数

1 个答案: