gpt4 book ai didi

javascript - 使用类模型/ typescript 时检索属性指令中的参数值?

转载 作者:行者123 更新时间:2023-12-03 09:10:26 24 4
gpt4 key购买 nike

您可以在下面看到我正在处理的一些代码片段。

angular.module('myApp', [])
.directive('maskedInput', [
function() {
return {
scope: {
mymask: '=maskedInput'
},
link: function(scope, elem, attrs) {
console.log('attributes', attrs);
scope.$watch('mymask', function(newVal) {
console.log(newVal);
elem.inputmask(newVal);
}, true)
}
}
}
])
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.mask = {
mask: '99999[-9999]',
greedy: false
};
}
]);
<script src="https:/cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<body>
<div ng-app="myApp" ng-controller="MainCtrl">
<h3>Mask</h3>
<p>Mask: 99999[-9999]</p>
<input type="text" ng-model="test" masked-input="mask">
<br />
<input type="text" ng-model="mask.mask" />
<br />{{mask}}
<br/>{{test}}
</td>
</body>

我正在努力在 typescript 中重新创建它。这是我到目前为止所拥有的。

class InputMaskDirective implements ng.IDirective {
constructor () {
var directive: ng.IDirective = {};
directive.restrict = 'A';
directive.scope = { mymask : '=maskedInput' };
directive.link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
scope.$watch('mymask', function (newVal) {
element.inputmask(newVal);
}, true);
};
return directive;
}
}

export = InputMaskDirective;

我们也使用 requirejs,因此当我们在 app.ts 文件中实例化该类时,我们会执行类似的操作

import MaskedInputDirective = require("src/common/directives/inputmaskdirective");
var application: angular.IModule = angular.module("application",[InjectionStuffHere]);
application.directive("maskedInput",[MaskedInputDirective]);
export = application;

我预见到的问题是,由于 requirejs 的“类”结构和 typescript 代码,理论上用户可以随意命名该指令。

这不会破坏范围内的代码吗?由于作用域正在寻找 html 中的 masked-input(指令的蛇形名称),如果用户将其命名为其他名称,它如何知道正确的名称?

我尝试过 attrs 看看是否能从中得到一些东西,但没有运气。我是否只需要希望用户在创建代码时不要搞乱它?

最佳答案

我关注this在 typescript 中编写 Angular Directive(指令)时的结构。

工厂和指令被创建为函数,其中指令函数返回 :ng.IDirective

function inputMaskDirective(): ng.IDirective {
return {
restrict: "A",
scope: {myMask: "=maskedInput"},
//and on
}
}

如果您有任何注入(inject),请将它们添加到函数的属性$inject

inputMaskDirective.$inject = ["someService"];

关于javascript - 使用类模型/ typescript 时检索属性指令中的参数值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32085096/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com