1

尝试通过 Transclude 动态地将错误/反馈消息传递给指令。但是，由于标签跨度或innerForm.inputField.$error.....

编辑：括号 [text] 之间的文本是需要翻译的测试。不要为此感到困惑。

找不到有关嵌入内容限制的信息。希望能在这里得到一些指点。

DOM 中的指令标签 

<input-validation-below
          place-holder="[E-mail address]"
          identifier="forgotten_email"
          ng-model="email"
          type="email">

      <span data-ng-show="innerForm.inputField.$error.required">[E-mail address] [is required]</span>
      <span data-ng-show="innerForm.inputField.$error.email">[This is not a valid] [E-mail address]</span>

    </input-validation-below>

指令

angular.module('inputValidationBelow', []).directive('inputValidationBelow', function () {
    return {
        scope: {
            login: '=ngModel',
            placeHolder: '@',
            identifier: '@',
            type: '@'
        },
        templateUrl: 'scripts/directives/inputValidationBelow/inputValidationBelow.html',
        restrict: 'E',
        transclude: true,
        require: ['ngModel', '^form'],
        link: function (scope, element, attrs, controllers) {

            scope.type = attrs.type;

            var ngModelController = controllers[0];
            ngModelController.$render = function () {
                if (typeof ngModelController.$viewValue !== 'undefined') {
                    scope.login = ngModelController.$viewValue;
                }
            };
        }
    };
});

指令模板

<ng-form name="innerForm"
    <label class="full-width" for="inputField" data-ng-class="{ error: innerForm.inputField.$dirty && innerForm.inputField.$invalid }">
        <!--[if lt IE 9]><p>{{placeHolder}}:</p></p><![endif]-->
        <input class="form full-width" type="{{type}}" name="inputField" placeholder="{{placeHolder}}" id="inputField" data-ng-model="login[identifier]" required />
    </label>

    <div class="alert alert-input" data-ng-show="innerForm.inputField.$dirty && innerForm.inputField.$invalid">
        <span class="alert alert-input" ng-transclude></span>
    </div>
</ng-form>

- 编辑 -

将此行添加到 Link 函数$compile(element.contents())(scope);“修复”问题但给我一个错误：

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <span class="alert alert-input" ng-transclude="">

4

0 回答 0