AngularJS: Связывание нескольких переменных области видимости во внешнем шаблоне

Question

AngularJS: Связывание нескольких переменных области видимости во внешнем шаблоне

0

Я пытаюсь создать некоторые настраиваемые директивы для входов с проверками, предоставляемыми директивой ngMessages. Тем не менее, я не могу связать несколько переменных из области $ scope, чтобы динамически определять имя формы и имя ввода. Вот мой код:

Директива:

app.directive('textBox', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            label: "@",
            fieldName: "@",
            bindTo: "="
        },
        require: "^form",
        templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
        link: function (scope, element, attrs, ctrl) {
            $scope.formName = ctrl.$name;
        }
    };
}]);

Шаблон:

<div>
    <label>{{label}}</label>
    <input type="text" name="{{fieldName}}" ng-model="{{field}}" required />
    <div ng-messages="{{formName}}.{{fieldName}}.$error">
        <div ng-message="required">You left the field blank...</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
        <div ng-message="email">Your field has an invalid email address</div>
    </div>
</div>

Использование:

<text-box bind-to="myField" field-name="myField"></text-box>

Проблемы, с которыми я сталкиваюсь, связаны с значением атрибута ng-messages. Кажется, что не работает, когда я использую фигурные фигурные скобки, и это делает текст "formName.fieldName. $ Error", если я этого не делаю. Другая проблема связана с ng-моделью, применяется тот же сценарий.

Спасибо!

Lucian Vilcea 19 апр. 2016, в 23:57

Источник

Теги:

angularjs

interpolation

directive

1 ответ

Ещё вопросы

AWolf · Accepted Answer · 2016-04-19T19-44-00.000Z

Вы можете передать formController, ctrl в свой метод ссылок, чтобы scope.form = ctrl; область действия, такую как scope.form = ctrl; ,

Затем вы можете добавить <div ng-messages="form[fieldName].$error"> для доступа к свойству $error.

Кулисные фигурные скобки необходимы только для имени поля ввода. Для ng-модели вы можете напрямую добавлять модельные завитушки, потому что ng-model требует двусторонней привязки для работы.

Пожалуйста, просмотрите демо ниже или этот jsfiddle.

angular.module('demoApp', ['ngMessages'])
	.controller('mainController', MainController)
    .directive('textBox', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            label: "@",
            fieldName: "@",
            bindTo: "="
        },
        require: "^form",
        templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
        link: function (scope, element, attrs, ctrl) {
            //$scope.formName = ctrl.$name;
            scope.form = ctrl;
        }
    };
}]);
    
function MainController($scope) {
	$scope.myField = 'test';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>

<div ng-app="demoApp" ng-controller="mainController">
    <form name="testForm">
        <text-box bind-to="model" field-name="myField"></text-box>
    </form>
    
    {{model}}
    
    
    <script type="text/ng-template" id="/WebClient/Directives/TextBox/textBoxTemplate.html">
    <div>
    <label>{{label}}</label>
    <input type="text" name="{{fieldName}}" ng-model="bindTo" required />
    <div ng-messages="form[fieldName].$error">
        <div ng-message="required">You left the field blank...</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
        <div ng-message="email">Your field has an invalid email address</div>
    </div>
</div>
    </script>
</div>