Question

我正在做的是创建一个带有表单名称，名称，模型，标题属性的自定义控件，用模板替换带有相应验证的文本

HMTL：

 <form name="usrForm" novalidate>

            <input-req form-name="usrForm" ctrl-name="myname" ng-model="user.name" my-title="Name"></input-req>

        </form>

JS：

var app = angular.module("demo", []).controller('demoCtrl', ["$scope", function ($scope) {

}]);
app.directive("inputReq", function () {

        return {
            restrict: "E",
            template: function (element, attrs) {
                return '<div class="form-group" ng-class="{ \'has-error\' : ' + attrs.formName + '.' + attrs.ctrlName + '.$invalid && !' + attrs.formName + '.' + attrs.ctrlName + '.$pristine }"><label>' + attrs.myTitle + '</label><input type="text" name="' + attrs.ctrlName + '" placeholder="' + attrs.myTitle + '" class="form-control" ng-model="' + attrs.ngModel + '" required><p ng-show="' + attrs.formName + '.' + attrs.ctrlName + '.$invalid && !' + attrs.formName + '.' + attrs.ctrlName + '.$pristine" class="help-block">You name is required.</p></div>';
            },
        }
    });

这工作正常，我需要分离HTML，我创建了一个新的HTML并移动了HTML但它不能正常工作

怎么做，任何人都建议一些解决方案

我试过这个：

app.directive("inputReq", function () {

    return {
        restrict: "E",
        replace: true,
        scope: {
            form: '=formName',
            name: '=ctrlName',
            model: '=ngModel',
            title: '=myTitle'
        },

        templateUrl: "input-req.html",

        link: function (scope, element, attr) {
            scope.attrs = attr;
        }
    };

});

输入req.html：

<div class="form-group" ng-class="{ 'has-error' : {{attrs.formName}}.{{attrs.ctrlName}}.$invalid && !{{attrs.formName}}.{{attrs.ctrlName}}.$pristine }">
    <label>{{attrs.myTitle}}</label>
    <input type="email" name="name" placeholder="{{attrs.ngModel}}" class="form-control" ng-model="{{attrs.ngModel}}" required>
    <p ng-show="{{attrs.formName}}.{{attrs.ctrlName}}.$invalid && !{{attrs.formName}}.{{attrs.ctrlName}}.$pristine" class="help-block">You title is required.</p>
</div>

THROWN ERROR：

错误：[$ parse：syntax]语法错误：第2列的令牌'{'无效密钥表达式[{{attrs.ngModel}}]的表达式从[{attrs.ngModel}}开始。

在angularjs中传递templateUrl的动态值

0 个答案: