Question

我试图避免一些重复的HTML，但我无法让我的指令完全正常工作。在我的代码的简化版本中，我们的想法是扩展类似的东西：

<mydir ng-model="x"></mydir>

类似于：

<div ng-class="{'has-error': myform.myfield.$invalid}">
    <input name="myfield" ng-model="x" ng-pattern="/^\d+$/">
</div>

然而，完全忽略了ng-class。 ng-model和ng-pattern似乎工作正常。我的指示：

.directive('mydir', function ($compile) {
    return {
        restrict: 'E',
        priority: 100,
        compile: function (element, attrs) {
            var node = '<div ng-class=' +
                '"{\'has-error\': myform.myfield2.$invalid}">' +
                '<input name="myfield2" ng-model="' + attrs['ngModel'] +
                '" ng-pattern="/^\\d+$/"></div>';
            var e = angular.element(node);
            $compile(e.contents());
            element.replaceWith(e);
        }
    };
}

在running code中，您可以看到第一个输入字段如何正确地变为红色，其中包含无效条目，例如＆＃34; ab＆＃34;，但第二个输入没有。

Answer 1

更改指令的内部HTML而不是完全替换它......

compile: function (element, attrs) {
    var node = '<div ng-class=' +
        '"{\'has-error\': myform.myfield2.$invalid}">' +
        '<input name="myfield2" ng-model="' + attrs['ngModel'] +
        '" ng-pattern="/^\\d+$/"></div>';

    element.html(node);
}

小提琴：http://jsfiddle.net/5eLxw/

某些标记在扩展指令中无法识别

1 个答案: