文章/答案/技术大牛

发布

社区首页 >问答首页 >扩展指令中未识别的一些标记

问扩展指令中未识别的一些标记
EN

Stack Overflow用户

提问于 2014-03-25 03:20:36

回答 1查看 73关注 0票数 0

我试图避免一些重复的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类被完全忽略了。吴-模型和ng-模式似乎运作良好。我的指令：

.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);
        }
    };
}

在运行代码中，您可以看到第一个输入字段是如何用"ab“这样的无效条目正确地变成红色的，但是第二个输入没有。

javascript

angularjs

angularjs-directive

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-25 04:08:01

更改指令的内部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/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22624849

复制

相似问题

问扩展指令中未识别的一些标记
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问扩展指令中未识别的一些标记EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问扩展指令中未识别的一些标记
EN