การปรับแต่งเทมเพลตภายในคำสั่ง

ฉันมีแบบฟอร์มที่ใช้มาร์กอัปจาก Bootstrap ดังต่อไปนี้:

<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>

มีรหัสสำเร็จรูปจำนวนมากอยู่ในนั้นซึ่งฉันต้องการลดเป็นคำสั่งใหม่ - การป้อนรูปแบบดังต่อไปนี้:

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

สร้าง:

   <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>

ฉันทำงานได้ดีมากผ่านเทมเพลตง่ายๆ

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>'

        }
    })

อย่างไรก็ตามเมื่อฉันเพิ่มฟังก์ชันการทำงานขั้นสูงมากขึ้นทำให้ฉันติดขัด

ฉันจะรองรับค่าเริ่มต้นในเทมเพลตได้อย่างไร

ฉันต้องการแสดงพารามิเตอร์ "type" เป็นแอตทริบิวต์ที่ไม่บังคับในคำสั่งของฉันเช่น:

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

"text"แต่ถ้าไม่มีอะไรจะระบุฉันต้องการที่จะเริ่มต้นกับ ฉันจะสนับสนุนสิ่งนี้ได้อย่างไร?

ฉันจะปรับแต่งเทมเพลตตามการมี / ไม่มีคุณลักษณะได้อย่างไร

ฉันยังต้องการที่จะสนับสนุนแอตทริบิวต์ "ที่จำเป็น" หากมีอยู่ เช่น:

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

หากrequiredมีอยู่ในคำสั่งฉันต้องการเพิ่มลงในสิ่งที่สร้างขึ้น<input />ในเอาต์พุตและไม่ต้องสนใจเป็นอย่างอื่น ฉันไม่แน่ใจว่าจะบรรลุเป้าหมายนี้ได้อย่างไร

ฉันสงสัยว่าข้อกำหนดเหล่านี้อาจก้าวไปไกลกว่าเทมเพลตทั่วไปและต้องเริ่มใช้ขั้นตอนการคอมไพล์ล่วงหน้า แต่ฉันไม่สามารถเริ่มต้นได้

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);
        }
    };
})

พยายามใช้โซลูชันที่ Misko เสนอ แต่ในสถานการณ์ของฉันแอตทริบิวต์บางอย่างซึ่งจำเป็นต้องรวมเข้ากับ html เทมเพลตของฉันเป็นคำสั่ง

น่าเสียดายที่คำสั่งทั้งหมดที่อ้างถึงโดยเทมเพลตผลลัพธ์ไม่ได้ทำงานอย่างถูกต้อง ฉันไม่มีเวลามากพอที่จะดำดิ่งสู่รหัสเชิงมุมและค้นหาสาเหตุที่แท้จริง แต่พบวิธีแก้ปัญหาซึ่งอาจเป็นประโยชน์

วิธีแก้ปัญหาคือการย้ายโค้ดซึ่งสร้างเทมเพลต html จากฟังก์ชันคอมไพล์เป็นเทมเพลต ตัวอย่างตามรหัสจากด้านบน:

    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
        }
    }
})

คำตอบข้างต้นน่าเสียดายที่ไม่ได้ผล โดยเฉพาะอย่างยิ่งขั้นตอนการคอมไพล์ไม่มีสิทธิ์เข้าถึงขอบเขตดังนั้นคุณจึงไม่สามารถปรับแต่งฟิลด์ตามแอตทริบิวต์แบบไดนามิกได้ การใช้ขั้นตอนการเชื่อมโยงดูเหมือนจะให้ความยืดหยุ่นมากที่สุด (ในแง่ของการสร้างโดมแบบอะซิงโครนัสเป็นต้น) แนวทางด้านล่างกล่าวถึงที่:

<!-- 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));
      }
    }
  }
})

ฉันได้สร้างส่วนสำคัญที่มีโค้ดที่สมบูรณ์มากขึ้นและเขียนวิธีการ

นี่คือสิ่งที่ฉันใช้

ฉันยังใหม่กับ AngularJS มากดังนั้นฉันอยากเห็นโซลูชันที่ดีกว่า / ทางเลือกอื่น ๆ

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);
            }
        }
    })

ตัวอย่างการใช้งาน:

<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>