कोणीय जेएस - निर्देश टेम्पलेट गतिशील

Question

मैं गतिशील टेम्पलेट के साथ निर्देश कैसे बना सकता हूं?

'use strict'; 

app.directive('ngFormField', function($compile) { 
return { 
    transclude: true, 
    scope: { 
     label: '@' 
    }, 
    template: '<label for="user_email">{{label}}</label>', 
    // append 
    replace: true, 
    // attribute restriction 
    restrict: 'E', 
    // linking method 
    link: function($scope, element, attrs) { 
     switch (attrs['type']) { 
      case "text": 
       // append input field to "template" 
      case "select": 
       // append select dropdown to "template" 
     } 
    } 
    } 
}); 

<ng-form-field label="First Name" type="text"></ng-form-field> 

यह वही है मैं अभी है, और इसे लेबल सही ढंग से प्रदर्शित किया जाता है। हालांकि, मुझे यकीन नहीं है कि टेम्पलेट में अतिरिक्त HTML कैसे जोड़ना है। या 2 टेम्पलेट्स को 1.

Answer 1

में समान आवश्यकता थी। $compile नौकरी करता है। (पूरी तरह से यह सुनिश्चित नहीं है कि यह करने का "तरीका" तरीका है, फिर भी कोणीय के माध्यम से अपना रास्ता काम कर रहा है)

http://jsbin.com/ebuhuv/7/edit - मेरी अन्वेषण परीक्षा।

ध्यान देने योग्य एक बात (मेरे उदाहरण के अनुसार), मेरी आवश्यकताओं में से एक यह था कि टेम्पलेट सहेजने के बाद type विशेषता के आधार पर बदल जाएगा, और टेम्पलेट बहुत अलग थे। हालांकि, यदि आपको वहां एक नया टेम्पलेट चाहिए, तो आपको डेटा बाध्यकारी मिल जाएगा, आपको फिर से कंपाइल करना होगा।

Answer 2

मैंने कुछ समान करने के लिए $ टेम्पलेट कैश का उपयोग किया है। मैंने कई एनजी-टेम्पलेट्स को एक ही एचटीएमएल फाइल में रखा है, जिसे मैं निर्देश के टेम्पलेट यूआरएल का उपयोग करके संदर्भित करता हूं। यह सुनिश्चित करता है कि HTML टेम्पलेट कैश पर उपलब्ध है। तो मैं एनजी-टेम्पलेट प्राप्त करने के लिए बस आईडी द्वारा चयन कर सकता हूं।

template.html:

<script type="text/ng-template" id=“foo”> 
foo 
</script> 

<script type="text/ng-template" id=“bar”> 
bar 
</script> 

निर्देश:

myapp.directive(‘foobardirective’, ['$compile', '$templateCache', function ($compile, $templateCache) { 

    var getTemplate = function(data) { 
     // use data to determine which template to use 
     var templateid = 'foo'; 
     var template = $templateCache.get(templateid); 
     return template; 
    } 

    return { 
     templateUrl: 'views/partials/template.html', 
     scope: {data: '='}, 
     restrict: 'E', 
     link: function(scope, element) { 
      var template = getTemplate(scope.data); 

      element.html(template); 
      $compile(element.contents())(scope); 
     } 
    }; 
}]); 

Answer 3

मैं इस समस्या से निपटने के कामयाब रहे।

https://github.com/nakosung/ng-dynamic-template-example

विशिष्ट फ़ाइल किया जा रहा है के साथ:

https://github.com/nakosung/ng-dynamic-template-example/blob/master/src/main.coffee

dynamicTemplate निर्देश मेजबान जो दायरे के भीतर पारित कर दिया है और की मेजबानी तत्व अन्य देशी कोणीय तत्वों की तरह काम करता गतिशील टेम्पलेट नीचे दिए गए लिंक है।

scope.template = '< div ng-controller="SomeUberCtrl">rocks< /div>' 

Answer 4

आप ng-switch 'के निर्देश का उपयोग करके टेम्पलेट में अपने स्विच बढ़ना चाहिए:

module.directive('testForm', function() { 
    return { 
     restrict: 'E', 
     controllerAs: 'form', 
     controller: function ($scope) { 
      console.log("Form controller initialization"); 
      var self = this; 
      this.fields = {}; 
      this.addField = function(field) { 
       console.log("New field: ", field); 
       self.fields[field.name] = field; 
      }; 
     } 
    } 
}); 

module.directive('formField', function() { 
    return { 
     require: "^testForm", 
     template: 
      '<div ng-switch="field.fieldType">' + 
      ' <span>{{title}}:</span>' + 
      ' <input' + 
      '  ng-switch-when="text"' + 
      '  name="{{field.name}}"' + 
      '  type="text"' + 
      '  ng-model="field.value"' + 
      ' />' + 
      ' <select' + 
      '  ng-switch-when="select"' + 
      '  name="{{field.name}}"' + 
      '  ng-model="field.value"' + 
      '  ng-options="option for option in options">' + 
      '  <option value=""></option>' + 
      ' </select>' + 
      '</div>', 
     restrict: 'E', 
     replace: true, 
     scope: { 
      fieldType: "@", 
      title: "@", 
      name: "@", 
      value: "@", 
      options: "=", 
     }, 
     link: function($scope, $element, $attrs, form) { 
      $scope.field = $scope; 
      form.addField($scope); 
     } 
    }; 
}); 

यह इस तरह इस्तेमाल किया जा सकता:

<test-form> 
    <div> 
     User '{{!form.fields.email.value}}' will be a {{!form.fields.role.value}} 
    </div> 
    <form-field title="Email" name="email" field-type="text" value="me@example.com"></form-field> 
    <form-field title="Role" name="role" field-type="select" options="['Cook', 'Eater']"></form-field> 
    <form-field title="Sex" name="sex" field-type="select" options="['Awesome', 'So-so', 'awful']"></form-field> 
</test-form> 

Answer 5

आप AngularJS उपयोग करना चाहते हैं गतिशील टेम्पलेट के साथ निर्देश, आप उन उत्तरों का उपयोग कर सकते हैं, लेकिन यहां अधिक पेशेवर और कानूनी इसका वाक्यविन्यास। आप केवल एक मान के साथ टेम्पलेट यूआरएल का उपयोग नहीं कर सकते हैं। आप इसे एक फ़ंक्शन के रूप में उपयोग कर सकते हैं, जो यूआरएल के रूप में मान देता है। उस फ़ंक्शन में कुछ तर्क हैं जिनका आप उपयोग कर सकते हैं।

http://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html

Answer 6

मैं एक ही स्थिति में किया गया है, मेरी पूर्ण समाधानhere

नियुक्त किया गया है मूल रूप से मैं एक टेम्पलेट निर्देश में इस तरह से

var tpl = '' + 
    <div ng-if="maxLength" 
     ng-include="\'length.tpl.html\'"> 
    </div>' + 
    '<div ng-if="required" 
     ng-include="\'required.tpl.html\'"> 
    </div>'; 

तो अनुसार लोड maxLength और required के मान पर मैं गतिशील रूप से 2 टेम्पलेट्स में से एक लोड कर सकता हूं, उनमें से केवल एक ही समय में दिखाया गया है यदि आवश्यक है।

मुझे लगता है कि यह मदद करता है।

Answer 7

एक तरह से अपने निर्देश में एक टेम्पलेट समारोह उपयोग कर रहा है:

... 
template: function(tElem, tAttrs){ 
    return '<div ng-include="' + tAttrs.template + '" />'; 
} 
...