Angular.js ডিরেক্টরি গতিশীল টেম্পলেট URL

Question

আমার একটি routeProviderটেমপ্লেটে একটি কাস্টম ট্যাগ রয়েছে যা কোনও টেম্পলেটটির জন্য কল করে directive। versionঅ্যাট্রিবিউট সুযোগ যা পরে ডান টেমপ্লেট আহ্বান দ্বারা জনবহুল করা হবে না।

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

কী সপ্তাহ এবং দিন তা নির্ভর করে স্তবটির একাধিক সংস্করণ রয়েছে। আমি সঠিক .htmlঅংশটি জনপ্রিয় করার জন্য নির্দেশটি ব্যবহার করার প্রত্যাশা করছিলাম was ভেরিয়েবলটি পড়ছে না 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

ডায়নামিক টেম্পলেট ইউআরএলের

— নিক গ্রেলে

: আপনি 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>'
   }
});

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

— অ্যালেন গিলিয়ানা

আপনার অর্থ, আপনি verগুণাবলীর পরিবর্তনগুলি দেখতে চান এবং নির্দেশিকা পুনরায় রেন্ডার করতে চান ?

— 18।

স্পষ্ট করার জন্য আপনাকে ধন্যবাদ। আপনি নির্দেশে ঘোষণা তাহলে upd পোস্ট।, আপনার ব্যবহার কেস যখন আপনি একাধিক ব্যবহার <hymn ...>ভাল কাজ করা উচিত। অথবা jsfilddle এ একটি প্রোটোটাইপ নির্মাণের সময় হতে পারে ?

— প্যাগগ্রিরি

হ্যালো @ অ্যালেনগিলিয়ানা, আমার ve take a look at your site, and changed [JSFiddle](http://jsfiddle.net/JQgG5/6/). All you need is সুযোগ: নির্দেশিক ঘোষণায় scope } । - সুযোগ বিচ্ছিন্নতা । এছাড়াও আমি দৃ strongly়ভাবে আপনাকে কৌণিকের শেষ সংস্করণটি ব্যবহার করার পরামর্শ দিচ্ছি। <script type="text/ng-template" id="...">- এইচটিএমএল পৃষ্ঠাগুলির স্থানীয় বিকল্প

— 1914

আপনি কি কৌনিক 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'
       }
   }
});

সুতরাং আপনি মার্কআপের মাধ্যমে টেমপ্লেট ইউআরএল সরবরাহ করতে পারেন

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

এখন আপনি কেবল একটি যত্ন নেবেন যে সম্পত্তির বিষয়বস্তু ইউআরএল গতিশীলভাবে উত্পন্ন পথের সাথে জনপ্রিয় হয়।

Comments

দুর্দান্ত, তবে ... আমি কি টেমপ্লেটআরল ফাংশন থেকে স্কোপ বৈশিষ্ট্যগুলিতে অ্যাক্সেস করতে পারি? টেম্পলেট

— ইউআরএল

আমি খুশী যে আপনি সমাধান পেয়েছেন। আমি যদি নির্দেশকের অংশ প্রয়োজন নিয়ন্ত্রক সেট না করে থাকে তবে আমি তার পিতামাতার উপর নির্ভরশীলতা রাখার পরামর্শ দেব না।

— আন্দ্রেজ কৌরিন

অবশেষে! ঠিক আমি খুঁজছেন ছিল কি! আমি বুঝতে পারিনি যে আমার কাছে টেমপ্লেট ইউআরএল ফাংশন থেকে এলেম এবং অ্যাটর্সের অ্যাক্সেস রয়েছে। ধন্যবাদ!

— coryvb123

টেমপ্লেট ইউআরএল একবার নির্দেশ অনুসারে বলা হয়, এটি প্রতিটি নির্দেশিক উদাহরণ সূচনা করার জন্য বলা হচ্ছে না, সাবধান !!! এটি কৌণিক হলেও বাগ হতে পারে ...

— Lu4

আমি এটি এখনও পরীক্ষা করে দেখিনি তবে আমার সর্বশেষ অনুসন্ধান অনুসারে এটি সম্ভবত এটি উল্লেখ করার মতো once per $compile phase। অন্য কথায় আপনি যদি ng-repeatআপনার নির্দেশের সাথে ব্যবহার করেন এবং নির্দিষ্ট ng-repeatআইটেমের প্রেক্ষাপটের ভিত্তিতে স্বতন্ত্র টেম্পলেট সেট করতে চান তবে এটি কার্যকর হবে না, কারণ $compileপ্রকৃত ng-repeatঘটনার আগে পর্যায় একবার আপনার নির্দেশের মধ্য দিয়ে চলে । সুতরাং এর অর্থ এটি একবার বলা হচ্ছে ...

— Lu4

Answer 3

@ পগ্রিগরিকে ধন্যবাদ, আমি ইনলাইন সম্পাদনার জন্য এই নির্দেশিকাটি ব্যবহার করে আমার সমস্যাটি সমাধান করতে পারলাম

.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

আপনার এখানে কাস্টম নির্দেশিকা প্রয়োজন নেই। কেবল এনজি-অন্তর্ভুক্ত এসসিআর অ্যাট্রিবিউট ব্যবহার করুন । এটি সংকলিত হয়েছে যাতে আপনি কোডটি ভিতরে রাখতে পারেন। আপনার সমস্যার সমাধান সহ প্লঙ্কার দেখুন।

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

প্যানেল-বডি। 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>'
        }
    })