Question

我想在无效的情况下添加红星进行输入。我写了一个指令，在输入元素附近添加一个红色星形元素。我和明星一起使用ng-show。我认为只有输入有效才会显示。问题是，即使输入无效，红星仍会显示。

<div ng-app="docu">
    <form name="form">
        <input name="inp" ng-error-show type="text" ng-model="x" ng-required="true">          

    </form>
</div>


var docu = angular.module('docu', ["portaldirectives"]);

var portaldirectives = angular.module("portaldirectives", []);       


portaldirectives.directive("ngErrorShow", function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ctrl) {
            var varName = "form.inp.$valid";
            element.parent().prepend('<span style="color:red" ng-show="!' + varName + '" >*</span>');
        }
    };
});

http://plnkr.co/edit/7So4ney5KEwlTaaNIN49?p=preview

Answer 1

您必须编译新的前置元素：

portaldirectives.directive("ngErrorShow", function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ctrl) {
            var varName = "form.inp.$valid";

            var a_input = angular.element($compile('<span style="color:red" ng-show="!' + varName + '" >*</span>')(scope));

            element.parent().prepend(a_input);
        }
    };
});

演示 Fixed Plunker

另见$comile文档

在内部指令中构建时，ng Show不起作用

1 个答案: