Question

我正在尝试为标签创建指令：输入对，以便在整个应用中使用。我也依赖z-validate属性来使用Breeze 来验证我的输入。

html文件：

<div data-af-label-input-pair data-af-model="vm.customer.firstName">
</div>

指令：

app.directive（＆＃39; afLabelInputPair＆＃39;，function（$ compile）{

    var directive = {
        restrict: 'A',
        transclude: true,
        replace: true,
        scope: {                    
            afModel: '='
        },
        templateUrl: '/app/templates/af-label-input-pair.html',
        link: function (scope, element, attrs) {
            scope.opts = attrs;
            $compile(element.contents())(scope);
        }
    }

    return directive;
});

以及模板文件：

<div>
<label>Some label:</label>
<input ng-model="afModel" data-z-validate />
</div>

这是在页面上正确显示html。但是z-validate没有启动。换句话说，我希望z-validate属性为我验证vm.customer.firstName 。

如果不使用指令＆amp;模板，我只是直接使用html，它工作正常。

有人可以指出我正确的方向吗？

谢谢！

Answer 1

我遇到了同样的问题，我通过在编译到父元素后移动breeze data-z-validate指令添加的[span class =“z-decorator”]来修复它。

    // Angular directive [spaField] responsible for generating grid cell controls.
spa.app.directive('spaField', ['$compile', function ($compile)
{
    var directive = {
    restrict: 'A', /* Restrict this directive to attributes. */
    replace: true, /* The given element will be replaced in the link function. */
    link: function ($scope, element, attrs) {
        // The data-z-validate directive will append a [<span class="z-decorator"] to the following [input] element, by using the jquery "append" function.
        var html = '<input type="text" data-ng-model="firstName" data-z-validate>'>;
        var compiled = $compile(html)($scope);

        // Get the [<span class="z-decorator"] appended to the input element by the z-validate directive.
        var span = compiled[0].parentNode.children[1];

        // The following 2 lines will only add the input element to the DOM and not the [<span class="z-decorator"], that is added by the z-validate directive.
        element.replaceWith(compiled);
        element = compiled;

        // Add the [<span class="z-decorator"] to the current parent element of the input element.
        element.parent().append(span);
    }
    };

    return directive;
}]);

带模板的Angular指令不适用于z-validate

1 个答案: