Tùy chỉnh mẫu trong một Chỉ thị

Tôi có một biểu mẫu đang sử dụng đánh dấu từ Bootstrap, như sau:

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

Có rất nhiều mã soạn sẵn trong đó, mà tôi muốn giảm xuống thành một chỉ thị mới - form-input, như sau:

<form-input label="Name" form-id="nameInput"></form-input>

tạo ra:

   <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
      </div>
    </div>

Tôi có nhiều thứ này làm việc thông qua một mẫu đơn giản.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {
                label: 'bind',
                formId: 'bind'
            },
            template:   '<div class="control-group">' +
                            '<label class="control-label" for="{{formId}}">{{label}}</label>' +
                            '<div class="controls">' +
                                '<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">' +
                            '</div>' +
                        '</div>'

        }
    })

Tuy nhiên, khi tôi bổ sung thêm các chức năng nâng cao thì tôi lại gặp khó khăn.

Làm cách nào để hỗ trợ các giá trị mặc định trong mẫu?

Tôi muốn hiển thị tham số "type" dưới dạng thuộc tính tùy chọn trên chỉ thị của mình, ví dụ:

<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>

Tuy nhiên, nếu không có gì được chỉ định, tôi muốn để mặc định thành "text". Tôi có thể hỗ trợ điều này như thế nào?

Làm cách nào để tùy chỉnh mẫu dựa trên sự hiện diện / vắng mặt của các thuộc tính?

Tôi cũng muốn có thể hỗ trợ thuộc tính "bắt buộc", nếu thuộc tính này có mặt. Ví dụ:

<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>

Nếu requiredcó trong chỉ thị, tôi muốn thêm nó vào giá trị được tạo <input />trong đầu ra và bỏ qua nó nếu không. Tôi không chắc làm thế nào để đạt được điều này.

Tôi nghi ngờ những yêu cầu này có thể đã vượt ra ngoài một khuôn mẫu đơn giản và phải bắt đầu sử dụng giai đoạn biên dịch trước, nhưng tôi không biết bắt đầu từ đâu.

angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
            element.replaceWith(htmlText);
        }
    };
})

Đã cố gắng sử dụng giải pháp do Misko đề xuất, nhưng trong tình huống của tôi, một số thuộc tính, cần được hợp nhất vào html mẫu của tôi, tự chúng là chỉ thị.

Thật không may, không phải tất cả các lệnh được tham chiếu bởi mẫu kết quả đều hoạt động chính xác. Tôi không có đủ thời gian để đi sâu vào mã góc cạnh và tìm ra nguyên nhân gốc rễ, nhưng đã tìm ra cách giải quyết, có thể hữu ích.

Giải pháp là di chuyển mã, tạo ra html mẫu, từ biên dịch sang một chức năng mẫu. Ví dụ dựa trên mã từ trên:

    angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        template: function(element, attrs) {
           var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
             return htmlText;
        }
        compile: function(element, attrs)
        {
           //do whatever else is necessary
        }
    }
})

Các câu trả lời trên rất tiếc là không hoàn toàn hoạt động. Đặc biệt, giai đoạn biên dịch không có quyền truy cập vào phạm vi, vì vậy bạn không thể tùy chỉnh trường dựa trên các thuộc tính động. Sử dụng giai đoạn liên kết dường như mang lại sự linh hoạt nhất (về mặt tạo dom không đồng bộ, v.v.) Phương pháp tiếp cận dưới đây giải quyết rằng:

<!-- Usage: -->
<form>
  <form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields">
</form>

// directive
angular.module('app')
.directive('formField', function($compile, $parse) {
  return { 
    restrict: 'E', 
    compile: function(element, attrs) {
      var fieldGetter = $parse(attrs.field);

      return function (scope, element, attrs) {
        var template, field, id;
        field = fieldGetter(scope);
        template = '..your dom structure here...'
        element.replaceWith($compile(template)(scope));
      }
    }
  }
})

Tôi đã tạo một ý chính với mã hoàn chỉnh hơn và một writeup của phương pháp này.

Đây là những gì tôi đã sử dụng.

Tôi còn rất mới với AngularJS, vì vậy rất muốn xem các giải pháp thay thế / tốt hơn.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {},
            link: function(scope, element, attrs)
            {
                var type = attrs.type || 'text';
                var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
                var htmlText = '<div class="control-group">' +
                    '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                        '<div class="controls">' +
                        '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                        '</div>' +
                    '</div>';
                element.html(htmlText);
            }
        }
    })

Ví dụ sử dụng:

<form-input label="Application Name" form-id="appName" required/></form-input>
<form-input type="email" label="Email address" form-id="emailAddress" required/></form-input>
<form-input type="password" label="Password" form-id="password" /></form-input>