AngularJS：在外部模板中链接多个作用域变量

Question

我正在尝试为具有 ngMessages 指令提供的验证的输入构建一些自定义指令。不过，我无法 link 来自 $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-model有关，同样适用。

谢谢！

Answer 1

您可以将 link 方法中的 formController、ctrl 传递给指令范围，例如 scope.form = ctrl;.

然后可以添加<div ng-messages="form[fieldName].$error">访问$error属性.

只有输入字段的名称才需要花括号。对于 ng-model，您可以直接添加没有卷曲的模型，因为 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>

AngularJS：在外部模板中链接多个作用域变量

AngularJS: Linking multiple scope variables inside external template

interpolation

directive

angularjs