Angular.js निर्देशकीय गतिशील टेम्पलेट

Question

मेरे पास एक routeProviderटेम्पलेट में एक कस्टम टैग है जो टेम्पलेट के लिए कॉल करता directiveहै। versionविशेषता गुंजाइश जो तब सही टेम्पलेट के लिए कहता है द्वारा भरे जाएंगे।

<hymn ver="before-{{ week }}-{{ day }}"></hymn>

भजन के कई संस्करण हैं जो सप्ताह और दिन के आधार पर हैं। मैं सही .htmlहिस्से को आबाद करने के लिए निर्देश का उपयोग करने का अनुमान लगा रहा था । चर को पढ़ा नहीं जा रहा है templateUrl।

emanuel.directive('hymn', function() {
    var contentUrl;
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            // concatenating the directory to the ver attr to select the correct excerpt for the day
            contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
        },
        // passing in contentUrl variable
        templateUrl: contentUrl
    }
});

अंश निर्देशिका में एकाधिक फ़ाइलों कि नाम से पुकारा जाता हैं before-1-monday.html, before-2-tuesday.html...

Comments

डायनामिक टेम्पलेट

— Nick Grealy

यदि आप AngularJS 1.5+ का उपयोग कर रहे हैं, तो इस सुरुचिपूर्ण समाधान की जांच करें: stackoverflow.com/a/41743424/1274852

— hkong

Answer 1

आप ng-includeनिर्देश का उपयोग कर सकते हैं ।

कुछ इस तरह की कोशिश करो:

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           scope.getContentUrl = function() {
                return 'content/excerpts/hymn-' + attrs.ver + '.html';
           }
       },
       template: '<div ng-include="getContentUrl()"></div>'
   }
});

युपीडी। verविशेषता देखने के लिए

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           scope.contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
           attrs.$observe("ver",function(v){
               scope.contentUrl = 'content/excerpts/hymn-' + v + '.html';
           });
       },
       template: '<div ng-include="contentUrl"></div>'
   }
});

Comments

इसका शानदार उपाय है। क्या इसे लिखने का एक तरीका है कि यह कई उदाहरणों को संभाल सकता है? वर्तमान में, एक बार स्कोप सेट हो जाने के बाद यह नए एटर्स को पहचान नहीं पाता है।

— एलन गिलियाना

आपका मतलब है, आप verविशेषता परिवर्तन और रेंडरर निर्देश देखना चाहते हैं ?

— 9

स्पष्ट करने के लिए आपको धन्यवाद। यदि आप रिसीवर में पोस्ट किए गए तरीके को निर्देश देते हैं, तो जब आप कई का उपयोग करते हैं तो आपका उपयोग मामला <hymn ...>अच्छी तरह से काम करना चाहिए। या शायद jsfilddle पर एक प्रोटोटाइप बनाने के लिए इसका समय ?

— pgregory

नमस्कार @AlenGiliana, I ve take a look at your site, and changed [JSFiddle](http://jsfiddle.net/JQgG5/6/). All you need is गुंजाइश: {} `निर्देशात्मक घोषणा में - गुंजाइश अलगाव । इसके अलावा, मैं आपको कोणीय के अंतिम संस्करण का उपयोग करने की दृढ़ता से सलाह देता हूं। <script type="text/ng-template" id="...">- एचटीएमएल पृष्ठों के लिए स्थानीय विकल्प है

— pgregory

क्या आप कोणीय 1.2.1 का उपयोग करने का मतलब है? जिस तरह से मदद करने के लिए धन्यवाद, यह सीखने की अवस्था पागल है :)

— एलन गिलियाना

Answer 2

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // some ode
       },
       templateUrl: function(elem,attrs) {
           return attrs.templateUrl || 'some/path/default.html'
       }
   }
});

तो आप markup के माध्यम से टेम्पलेट प्रदान कर सकते हैं

<hymn template-url="contentUrl"><hymn>

अब आप बस इस बात का ध्यान रखते हैं कि संपत्ति contentUrl गतिशील रूप से उत्पन्न पथ के साथ पॉपुलेट करता है।

Comments

अच्छा है, लेकिन ... क्या मैं templateUrl फ़ंक्शन से गुंजाइश विशेषताओं तक पहुंच सकता हूं?

— TemplateUrl

मुझे खुशी है कि आपने समाधान पाया। जब तक यह निर्देश के भाग की आवश्यकता को नियंत्रित नहीं किया जाता है, तब तक मैं इसके अभिभावक पर निर्भरता रखने के निर्देश की सिफारिश नहीं करूंगा।

— लेडी कौरिन

आखिरकार! ठीक वही जो मेरे द्वारा खोजा जा रहा था! मुझे नहीं पता था कि मेरे पास टेम्पलेट और एक्सेल फ़ंक्शन से एलएम और अटार्स तक पहुंच है। धन्यवाद!

— coryvb123

templateUrl को निर्देश के अनुसार एक बार कॉल किया जाता है, इसे प्रत्येक निर्देश आवृत्ति उदाहरण पर नहीं बुलाया जा रहा है, सावधान रहें !!! हालांकि यह कोणीय में बग हो सकता है ...

— Lu4

मैंने अभी तक इसकी जाँच नहीं की है, लेकिन मेरे नवीनतम निष्कर्षों के अनुसार, यह संभवतः ध्यान देने योग्य है कि यह है once per $compile phase। दूसरे शब्दों में यदि आप ng-repeatअपने निर्देश के साथ प्रयोग करते हैं और विशिष्ट ng-repeatआइटम संदर्भ के आधार पर अलग-अलग टेम्पलेट सेट करना चाहते हैं , तो यह काम नहीं करेगा, क्योंकि $compileचरण वास्तविक ng-repeatहोने से पहले एक बार आपके निर्देश के माध्यम से चलता है। तो उस अर्थ में इसे एक बार बुलाया जा रहा है ...

— Lu4

Answer 3

@Pgregory को धन्यवाद, मैं इनलाइन संपादन के लिए इस निर्देश का उपयोग करके अपनी समस्या को हल कर सकता था

.directive("superEdit", function($compile){
    return{
        link: function(scope, element, attrs){
            var colName = attrs["superEdit"];
            alert(colName);

            scope.getContentUrl = function() {
                if (colName == 'Something') {
                    return 'app/correction/templates/lov-edit.html';
                }else {
                    return 'app/correction/templates/simple-edit.html';
                }
            }

            var template = '<div ng-include="getContentUrl()"></div>';

            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
})

Answer 4

आपको यहां कस्टम निर्देश की आवश्यकता नहीं है। बस एनजी-शामिल src विशेषता का उपयोग करें । यह संकलित है ताकि आप अंदर कोड डाल सकें। अपने मुद्दे के समाधान के साथ प्लंकर देखें।

<div ng-repeat="week in [1,2]">
  <div ng-repeat="day in ['monday', 'tuesday']">
    <ng-include src="'content/before-'+ week + '-' + day + '.html'"></ng-include>
  </div>
</div>

Answer 5

मुझे वही समस्या थी और मैं दूसरों से थोड़ा अलग तरीके से हल करता था। मैं कोणीय 1.4.4 का उपयोग कर रहा हूं।

मेरे मामले में, मेरे पास एक शेल टेम्प्लेट है जो सीएसएस बूटस्ट्रैप पैनल बनाता है:

<div class="class-container panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">{{title}} </h3>
    </div>
    <div class="panel-body">
        <sp-panel-body panelbodytpl="{{panelbodytpl}}"></sp-panel-body>
    </div>
</div>

मैं रूट के आधार पर पैनल बॉडी टेम्प्लेट शामिल करना चाहता हूं।

    angular.module('MyApp')
    .directive('spPanelBody', ['$compile', function($compile){
        return {
            restrict        : 'E',
            scope : true,
            link: function (scope, element, attrs) {
                scope.data = angular.fromJson(scope.data);
                element.append($compile('<ng-include src="\'' + scope.panelbodytpl + '\'"></ng-include>')(scope));
            }
        }
    }]);

मेरे पास तब निम्न टेम्पलेट शामिल है जब मार्ग है #/students:

<div class="students-wrapper">
    <div ng-controller="StudentsIndexController as studentCtrl" class="row">
        <div ng-repeat="student in studentCtrl.students" class="col-sm-6 col-md-4 col-lg-3">
            <sp-panel 
            title="{{student.firstName}} {{student.middleName}} {{student.lastName}}"
            panelbodytpl="{{'/student/panel-body.html'}}"
            data="{{student}}"
            ></sp-panel>
        </div>
    </div>
</div>

पैनल- body.html टेम्पलेट निम्नानुसार है:

Date of Birth: {{data.dob * 1000 | date : 'dd MMM yyyy'}}

किसी के पास जाने के मामले में नमूना डेटा:

var student = {
    'id'            : 1,
    'firstName'     : 'John',
    'middleName'    : '',
    'lastName'      : 'Smith',
    'dob'           : 1130799600,
    'current-class' : 5
}

Answer 6

मेरे पास इस बारे में एक उदाहरण है।

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container-fluid body-content" ng-controller="formView">
        <div class="row">
            <div class="col-md-12">
                <h4>Register Form</h4>
                <form class="form-horizontal" ng-submit="" name="f" novalidate>
                    <div ng-repeat="item in elements" class="form-group">
                        <label>{{item.Label}}</label>
                        <element type="{{item.Type}}" model="item"></element>
                    </div>
                    <input ng-show="f.$valid" type="submit" id="submit" value="Submit" class="" />
                </form>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>

---

angular.module('app', [])
    .controller('formView', function ($scope) {
        $scope.elements = [{
            "Id":1,
            "Type":"textbox",
            "FormId":24,
            "Label":"Name",
            "PlaceHolder":"Place Holder Text",
            "Max":20,
            "Required":false,
            "Options":null,
            "SelectedOption":null
          },
          {
            "Id":2,
            "Type":"textarea",
            "FormId":24,
            "Label":"AD2",
            "PlaceHolder":"Place Holder Text",
            "Max":20,
            "Required":true,
            "Options":null,
            "SelectedOption":null
        }];
    })
    .directive('element', function () {
        return {
            restrict: 'E',
            link: function (scope, element, attrs) {
                scope.contentUrl = attrs.type + '.html';
                attrs.$observe("ver", function (v) {
                    scope.contentUrl = v + '.html';
                });
            },
            template: '<div ng-include="contentUrl"></div>'
        }
    })