5

ディレクティブ テンプレート内で ngMessages が機能しません。

テンプレートとリンク関数を含むディレクティブmyInputがあり、テンプレート関数内で、ラップされた<label>andのテンプレート文字列を作成します<input>。

Link 関数内でrequire: '^form'FormController を使用し、フォーム名を取得します。次にngMessages、ラップされた要素の後にブロックを配置します。

    (function () {
        'use strict';

        angular
            .module('app.components')
            .directive('myInput', MyInput);

        /*@ngInject*/
        function MyInput($compile, ValidatorService, _, LIST_OF_VALIDATORS) {
            return {
                require: '^form',
                restrict: 'E',
                controller: MyInputController,
                controllerAs: 'vm',
                bindToController: true,
                template: TemplateFunction,
                scope: {
                    label: '@',
                    id: '@',
                    value: '=',
                    validateCustom: '&'
                },
                 link: MyInputLink

            };

            function MyInputController($attrs) {
                var vm = this;
                vm.value = '';
                vm.validateClass = '';
                vm.successMessage = '';
                vm.errorMessage = '';
            }

            function TemplateFunction(tElement, tAttrs) {
                return '<div class="input-field">' +
                    '   <label id="input_{{vm.id}}_label" for="input_{{vm.id}}" >{{vm.label}}</label>' +
                    '   <input id="input_{{vm.id}}" name="{{vm.id}}" ng-class="vm.validateClass" type="text" ng-model="vm.value" >' +
                    '</div>';

            }

            function MyInputLink(scope, element, attrs, form){
                var extra = '   <div ng-messages="' + form.$name + '.' + scope.vm.id + '.$error">' +
                    '       <div ng-messages-include="/modules/components/validationMessages.html"></div>' +
                    '   </div>';
                $(element).after(extra);
            }
        }
    })();

使用法：

    <h1>Test</h1>
    <form name="myForm">
        <my-input label="My Input" id="input1" value="vm.input1"></my-input>

        -------

        <!-- this block is hardcoded and is working, it does not come from the directive! -->
        <div ng-messages="myForm.input1.$error">
            <div ng-messages-include="/modules/components/validationMessages.html"></div>
        </div>

    </form>
4

2 に答える 2

0

関数内に ngMessages ブロックを追加する代わりに、link関数内に追加しcompileます。

linkが欠落しているため、機能ほど便利ではありませんが、機能FormControllerします:-)

ここにコード：

    compile: function(tElement, tAttrs){
        var name = tElement.closest('form').attr('name'),
                   fullFieldName = name + '.' + tAttrs.id; // or tAttrs.name
        var extra = '<div ng-messages="' + fullFieldName + '.$error">' +
                    '    <div ng-messages-include="/modules/components/validationMessages.html"></div>' +
                    '</div>';
        $(element).after(extra);
于 2015-07-23T13:33:42.387 に答える
0

これが私がしたことです。スコープに追加してからmyForm: '='、ディレクティブのテンプレートで参照されます<div ng-messages="vm.myForm[vm.id].$error" >

これは、リンク機能をいじるよりもはるかにクリーンだと思います。

于 2015-07-27T23:09:03.233 に答える