在 angular 指令中设置元素的值

Question

我想为占位符制作自定义角度指令。

指令代码如下：

class customDirective {

restrict: string = "A";
link = (scope: ng.IScope,
    instanceElement: ng.IAugmentedJQuery,
    instanceAttributes: ng.IAttributes,
    controller: any,
    transclude: ng.ITranscludeFunction) => {
    instanceElement.val((<any>instanceAttributes).tsplaceholder);
    instanceElement.on("focus", (eventObj: JQueryEventObject) => {
        if (instanceElement.val() === (<any>instanceAttributes).tsplaceholder) {
            instanceElement.removeClass("gray-textbox");
            instanceElement.val("");
        }
    });

    instanceElement.on("blur", (eventObj: JQueryEventObject) => {
        if (instanceElement.val() === "") {
            instanceElement.addClass("gray-textbox");
            instanceElement.val((<any>instanceAttributes).tsplaceholder);
        }
    });
    instanceElement.addClass("gray-textbox");
    //instanceElement.attr("value", (<any>instanceAttributes).tsplaceholder);
    //this.$compile(instanceElement.contents())(scope);
}

}

taxSimpleApp.directive("tsplaceholder", () => {
return new customDirective();
});

我正在使用下面的 html 代码。

<input name="ssn2"
      id="jenish"
      type="text"
      required                               
      ng-model="myVal" 
      tsplaceholder="XXX-XX-XXXX">

我正在使用带有打字稿的角度。

但在上面的示例中，当第一个视图加载时，它确实将 value 属性设置为我们传递的占位符。但是在第一个焦点丢失后它突然开始工作。

我不知道为什么 value("XXX-XX-XXXX") 没有第一次出现。

如果可能的话，提前感谢您的任何帮助。

Answer 1

instanceElement.on 是一个 jquery 命令-> 在它的回调结束时运行 $scope.$apply() 来提醒 Angular 模型的变化

您还应该使用您的 ng-model "$scope.myVal"，而不是 instanceElement.val() 来为您的输入赋值