জঙ্গো সহ AngularJS - বিরোধী টেম্পলেট ট্যাগ


302

আমি জ্যাঙ্গোর সাথে অ্যাঙ্গুলারজেএস ব্যবহার করতে চাই তবে তারা উভয়ই {{ }}তাদের টেম্পলেট ট্যাগ হিসাবে ব্যবহার করে । কিছু অন্যান্য কাস্টম টেম্প্লেটিং ট্যাগ ব্যবহার করার জন্য দুজনের মধ্যে একটির পরিবর্তনের কী সহজ উপায় আছে?


1
আমি কেবল জাঙ্গো templatesডিরেক্টরি থেকে একটি টেম্পলেট রেন্ডার করি , বাকিটি আমি রেখেছি static। এইভাবে আপনার হস্তক্ষেপ নেই। আমি এখানে একটি টিউটোরিয়াল লিখেছি: coderwall.com/p/bzjuka/…
কনার

কৌণিক 2 এবং জিনজা 2 এর মধ্যে ডেটা কীভাবে পাস করবেন? কোনও সহায়তা
নরেন্দ্র

@ নরেন্দ্র এটি ভিন্ন সমস্যা যা এই প্রশ্নের সাথে প্রাসঙ্গিক নয়। দয়া করে এটি অনুসন্ধান করুন এবং যদি আপনার কোনও উত্তর না পাওয়া যায় তবে এটি একটি নতুন প্রশ্ন হিসাবে জিজ্ঞাসা করুন।
এন্ডোফেজ

উত্তর:


299

কৌণিক 1.0 এর জন্য আপনাকে ইন্টারপোলেশন প্রতীকগুলি কনফিগার করতে $ ইন্টারপোল্টপ্রোভাইডার এপিএস ব্যবহার করা উচিত: http://docs.angularjs.org/api/ng.$terterlateletProvider

এর মতো কিছুতে কৌশলটি করা উচিত:

myModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

দুটি বিষয় মনে রাখবেন:

  • সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড টেম্পলেটগুলি মিশ্রণ করা খুব কমই খুব ভাল ধারণা এবং সতর্কতার সাথে ব্যবহার করা উচিত। প্রধান বিষয়গুলি হ'ল: রক্ষণাবেক্ষণযোগ্যতা (পড়তে অসুবিধা) এবং সুরক্ষা (দ্বিগুণ প্রবৃত্তি একটি নতুন সুরক্ষার ভেক্টর প্রকাশ করতে পারে - যেমন সার্ভারসাইড এবং ক্লায়েন্টসাইডের নিজেরাই টেম্প্লেটিংয়ের মাধ্যমে নিরাপদ থাকতে পারে, তাদের সংমিশ্রণটি নাও হতে পারে)।
  • যদি আপনি তৃতীয় পক্ষের নির্দেশাবলী (উপাদানগুলি) ব্যবহার {{ }}করেন যা তাদের টেম্পলেটগুলিতে ব্যবহার করে তবে আপনার কনফিগারেশনটি সেগুলি ভেঙে দেবে। ( স্থগিত স্থির )

যদিও প্রথম ইস্যুটি সম্পর্কে আমরা কিছু করতে পারছি না, লোকদের সতর্ক করা ব্যতীত, আমাদের দ্বিতীয় সমস্যাটি সমাধান করা দরকার।


4
আপনার প্রথম পয়েন্টটি (সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড টেম্পলেটগুলি মিশ্রনের জন্য রক্ষণাবেক্ষণ, সুরক্ষা এবং অন্যান্য উদ্বেগ) বোঝাতে আপনার কি আপত্তি হবে? আরও কিছুটা ব্যাখ্যা সহায়ক হবে।
ব্রায়ান

1
@ বিটিলাচেন্স - আমি উত্তরটি প্রসারিত করেছি।
ইগোর মিনার

12
যেহেতু $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
p

5
দেখে মনে হচ্ছে "ফিক্স" বন্ধ রয়েছে। তার মানে কি এখন তৃতীয় পক্ষের উপাদানগুলি ব্যবহার করা নিরাপদ নয়?
অ্যালেক্স Okrushko

1
কাঁচা আউটপুট জন্য $ ইন্টারপোলেটপ্রভাইডার আপডেট করার কোনও উপায়? যেমন {{{foo}}} হয়ে উঠছে {{[{foo}]}}?
পরীক্ষক

122

আপনি সম্ভবত ভারবাটিম জ্যাঙ্গো টেম্পলেট ট্যাগ ব্যবহার করে দেখতে এবং এটি ব্যবহার করতে পারেন:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

{% verbatim %}
<div ng-app="">
    <p>10 is {{ 5 + 5 }}</p>
</div>
{% endverbatim %}


যদিও এটি একটি খুব কার্যকর সমাধান, এমন কিছু ক্ষেত্রে রয়েছে যেখানে আমি সার্ভারের ডেটা দিয়ে আমার মতামতগুলি বুটস্ট্র্যাপ করতে সক্ষম হতে চাই যাতে এটি দ্রুত অগোছালো হয়ে উঠতে পারে। ব্যবহারকারীর ব্যবহারকারীর নাম মত জিনিস চিন্তা করুন, এটি পরিবর্তন হবে না তাই আমি এটি সার্ভারের টেম্পলেটটিতে লিখব তবে এর চারপাশে এমন কিছু টুকরো থাকতে পারে যা আমি কৌনিক দিয়ে লিখব।
এন্ডোফেজ


11
জ্যাঙ্গো ১.7 এ আপনার ভার্ব্যাটিম লোড করার দরকার নেই কারণ এটি স্ট্যান্ডার্ড ট্যাগ লাইব্রেরিতে রয়েছে। আপনাকে কেবল ট্যাগগুলি নিজেরাই ব্যবহার করতে হবে।
হাইপোস্ট

1
সেটিংস থেকে জ্যাঙ্গো ডিফল্ট বন্ধনীর পরিবর্তন করার উপায় থাকলে ভাল লাগবে তবে এটিও কার্যকর হয়।
অ্যাড্রিয়ান লোপেজ

42

আপনি যদি পৃষ্ঠার পৃথক বিভাগ সঠিকভাবে করেন তবে আপনি সহজেই "কাঁচা" ট্যাগ স্কোপে Angularjs ট্যাগ ব্যবহার করতে পারেন।

জিনজা 2 তে

{% raw %}
    // here you can write angularjs template tags.
{% endraw %}

জ্যাঙ্গো টেমপ্লেটে (1.5 এর উপরে)

{% verbatim %}    
    // here you can write angularjs template tags.
{% endverbatim %}

1
এই সমাধানটি বাহ্যিক প্যাকেজগুলির স্বীকৃত উত্তরের সাথে তুলনামূলকভাবে সামঞ্জস্যতা ভঙ্গ করে না।
partizanos

30

আমরা জ্যাঙ্গো 'এনজি' তে একটি খুব সহজ ফিল্টার তৈরি করেছি যা দুটির সাথে মেশানো সহজ করে তোলে:

foo.html:

...
<div>
  {{ django_context_var }}
  {{ 'angularScopeVar' | ng }}
  {{ 'angularScopeFunction()' | ng }}
</div>
...

ngফিল্টার ভালো দেখায়:

from django import template
from django.utils import safestring

register = template.Library()


@register.filter(name='ng')
def Angularify(value):
  return safestring.mark_safe('{{%s}}' % value)

এটি করার অন্য একটি খুব কার্যকর উপায়, তবে আমি অনেকগুলি মধ্যে ফিল্টার যুক্ত করার পরিবর্তে এক জায়গায় ট্যাগগুলি পরিবর্তন করতে চাই ...
এন্ডোফেজ

1
আপনি এনজি ফিল্টারটি কীভাবে তৈরি করবেন? আপনি একটি উদাহরণ যোগ করতে পারেন?
বেন লিয়ানাজ

আপডেট উত্তর। @ এন্ডোফেজে আমার কাছে জ্যাঙ্গো {{}} জোড়ার তুলনায় অনেক বেশি কৌণিক {{}} জোড়া রয়েছে, তাই আমি বরং জাজানোগুলি আপডেট করব।
ওয়েস আলভারো 20'15

@ ওয়েলস আলভারো দুর্ভাগ্যক্রমে আমি কেবল একটি উত্তর গ্রহণ করতে পারি।
এন্ডোফেজ

26

তাই আজ আমি কৌণিক আইআরসি চ্যানেলে কিছু দুর্দান্ত সহায়তা পেয়েছি। দেখা যাচ্ছে আপনি খুব সহজেই অ্যাংুলারের টেম্পলেট ট্যাগ পরিবর্তন করতে পারেন। আপনার কৌণিক অন্তর্ভুক্ত করার পরে নীচের প্রয়োজনীয় স্নিপেটগুলি অন্তর্ভুক্ত করা উচিত (প্রদত্ত উদাহরণটি তাদের মেলিং তালিকায় প্রদর্শিত হবে (())এবং আপনার নিজস্ব বিকল্প হিসাবে নতুন টেমপ্লেট ট্যাগ হিসাবে ব্যবহার করবে ):

angular.markup('(())', function(text, textNode, parentElement){
  if (parentElement[0].nodeName.toLowerCase() == 'script') return;
  text = text.replace(/\(\(/g,'{{').replace(/\)\)/g, '}}');
  textNode.text(text);
  return angular.markup('{{}}').call(this, text, textNode, parentElement);
});

angular.attrMarkup('(())', function(value, name, element){
    value = value.replace(/\(\(/g,'{{').replace(/\)\)/, '}}');
    element[0].setAttribute(name, value);
    return angular.attrMarkup('{{}}').call(this, value, name, element);
});

এছাড়াও, আমি একটি আগত বর্ধনের দিকে ইঙ্গিত করা হয়েছিল যা প্রকাশ করবে startSymbolএবং এমন endSymbolবৈশিষ্ট্য যা আপনার পছন্দসই ট্যাগগুলিতে সেট করা যেতে পারে।


17
এবং এটি আপনি কৌণিক 1.0 এ এটি করেন: var এম = কৌণিক.মডিউল ('মাই অ্যাপ', []); m.config (ফাংশন (p ইন্টারপোলেটপ্রোভাইডার) {p ইন্টারপোলেটপ্রোভিডার.স্টার্টস সিম্বল ('(('); $ ইন্টারপোলিটপ্রভাইডার.অ্যান্ডসিম্বল ('))');});
ইদুরসুন

কৌণিক আইআরসি চ্যানেল। যে কারও কাছে, আমি #angularjs এ একটি পেয়েছি
শানিমাল

17

আমি টেমপ্লেট ট্যাগ হিসাবে ডাবল বন্ধনী (()) ব্যবহার করার বিরুদ্ধে ভোট দিয়েছি। এটি ততক্ষণ কাজ করতে পারে যতক্ষণ না কোনও ফাংশন কল জড়িত না থাকে তবে যখন নিম্নলিখিতটির চেষ্টা করা হয়

ng:disabled=(($invalidWidgets.visible()))

ফায়ারফক্সের (10.0.2) ম্যাকের সাথে আমি অভিযুক্ত যুক্তির পরিবর্তে অত্যন্ত দীর্ঘ ত্রুটি পেয়েছি। <[]> আমার পক্ষে ভাল ছিল, কমপক্ষে এখন অবধি।

2012-03-29 সম্পাদনা করুন: দয়া করে নোট করুন যে। অবৈধ উইজেটগুলি হ্রাস করা হয়েছে is তবে আমি এখনও ডাবল ধনুর্বন্ধনী চেয়ে অন্য একটি মোড়ানো ব্যবহার করব। ০.১০..7 এর চেয়ে বেশি কৌণিক সংস্করণের জন্য (আমার ধারণা) আপনি নিজের অ্যাপ / মডিউল সংজ্ঞায় খুব সহজেই মোড়কে পরিবর্তন করতে পারেন:

angular.module('YourAppName', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<[');
    $interpolateProvider.endSymbol(']>');
}); 

এপিআই ডক্স


ন্যায্য বিন্দু. আমি এটি ভেবে দেখিনি তবে আমি বিশেষ করে ব্যবহারের পক্ষে পরামর্শ দিচ্ছিলাম না (()), আমি কেবলমাত্র ডিলিমিটারগুলি কনফিগার করতে সক্ষম হতে চাই।
এন্ডোফেজ

15

আমি নীচের কোডটি সহায়ক বলে মনে করেছি। আমি কোডটি এখানে পেয়েছি: http://djangosnippets.org/snippets/2787/

"""
filename: angularjs.py

Usage:
    {% ng Some.angular.scope.content %}

e.g.
    {% load angularjs %}
    <div ng-init="yourName = 'foobar'">
        <p>{% ng yourName %}</p>
    </div>
"""

from django import template

register = template.Library()

class AngularJS(template.Node):
    def __init__(self, bits):
        self.ng = bits

    def render(self, ctx):
        return "{{%s}}" % " ".join(self.ng[1:])

def do_angular(parser, token):
    bits = token.split_contents()
    return AngularJS(bits)

register.tag('ng', do_angular)

আমি এই কাস্টম ট্যাগটি ব্যবহার করেছি তবে তারপরে যদি আমি এরকম কিছু ব্যবহার করি: <p>{% ng location %}</p> এটি হ'ল {{location}}কোঁকড়ানো ধনুর্বন্ধনী সহ রেন্ডার হয় ! এটি আমার কন্ট্রোলারে হার্ডকোডযুক্ত $ স্কোপ.লোকেশনের মান সরবরাহ করে না। কোন ধারণা আমি কি মিস করছি?
কেশব অগ্রবাল


11

আপনি যদি জাঙ্গো 1.5 ব্যবহার করেন এবং আরও নতুন ব্যবহার করুন:

  {% verbatim %}
    {{if dying}}Still alive.{{/if}}
  {% endverbatim %}

আপনি যদি অ্যাপেনজিনে জাঙ্গো ১.২ এর সাথে আটকে থাকেন তবে এর মতো ভার্ব্যাটিম টেমপ্লেট কমান্ড দিয়ে জাঙ্গো সিনট্যাক্সটি প্রসারিত করুন ...

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

আপনার ফাইল ব্যবহার:

from google.appengine.ext.webapp import template
template.register_template_library('utilities.verbatim_template_tag')

সূত্র: http://bamboobig.blogspot.co.at/2011/09/notebook- using-jquery-templates-in.html


ধন্যবাদ ... অবশেষে এই কাজটি পেয়েছে তবে আমার ... 1) একটি নতুন পাইথন মডিউল তৈরি করতে হয়েছিল। আমি এটিকে ইউটিলিটির নাম দিয়েছি এবং এতে ভার্বাটিম_টেম্পলেটটিগ.পি ফাইলটি রেখেছি। (উপরের ফাইলটি ভারব্যাটিমনড শ্রেণীর সাথে সংজ্ঞায়িত করা হয়েছে)। 2) আমদানির বিবরণী থেকে: এটিকে পরিবর্তন করুন from django import template : from google.appengine._internal.django import template তারপরে, আমার মূল ফাইলে, কেবলমাত্র ফাইলের template.register_template_library('utilities.verbatim_template_tag')
রজার

7

আপনি জ্যাঙ্গোকে আউটপুট করতে {{এবং }}পাশাপাশি অন্যান্য সংরক্ষিত টেম্পলেট স্ট্রিং {% templatetag %}ট্যাগ ব্যবহার করে বলতে পারেন ।

উদাহরণস্বরূপ, ব্যবহার {% templatetag openvariable %}আউটপুট হবে {{


3
আমি জানি এটি সম্ভব তবে এটি অগোছালো ... টেমপ্লেট ট্যাগটিকে কেবল ফ্রেমওয়ার্কগুলির মধ্যে একটিতে কনফিগার করার জন্য এটি অনেক বেশি ক্লিনার (এবং খুব বড় জিজ্ঞাসা বলে মনে হয় না) হবে। দিনের শেষে এটি পর্দার আড়ালে কেবল স্ট্রিং ম্যাচ করছে ...
এন্ডোফেজ

3

আমি এমন একটি সমাধান দিয়ে থাকব যা উভয় জ্যাঙ্গো ট্যাগ uses {}} পাশাপাশি কৌণিকর {{}} উভয়ই একটি ভার্ব্যাটিম বিভাগ বা টেমপ্লেট ট্যাগ সহ ব্যবহার করে।

এটি কেবলমাত্র কারণ হিসাবে আপনি ular ইন্টারপোলেটপ্রাইডার.স্টার্টসাইম্বল $ ইন্টারপোলেটপ্রাইডার.অ্যান্ডসিম্বল এর মাধ্যমে অ্যাংুলারজগুলি কাজ করার পদ্ধতিটি (উল্লিখিত) পরিবর্তন করতে পারবেন তবে আপনি যদি ইউআই-বুটস্ট্র্যাপের মতো অন্যান্য কৌণিক উপাদান ব্যবহার করতে শুরু করেন তবে দেখতে পাবেন যে কিছু টেম্পলেট ইতিমধ্যে নির্মিত built স্ট্যান্ডার্ড অ্যাঙ্গুলার্স ট্যাগ সহ {{}}}

উদাহরণস্বরূপ https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html দেখুন


ভাল যুক্তি. পিপিআইতে এখন একটি জ্যাঙ্গো-কৌণিক প্যাকেজ রয়েছে যার অর্থ দুটি নাটককে একসাথে সুন্দর করে তোলা যায়, তবে টেমপ্লেট ট্যাগ ইস্যুটি এটি কতটা কমিয়ে দেয় তা আমি তদন্ত করি নি।
এন্ডোফেজ

0

আপনি যদি কোনও সার্ভার-সাইড ইন্টারপোলেশন করেন তবে এটি করার একমাত্র সঠিক উপায়<>

$interpolateProvider.startSymbol('<{').endSymbol('}>');

আর কিছু হ'ল এক্সএসএস ভেক্টর।

এর কারণ এটি যে যে কোনও কৌণিক বিস্ময়ক যা জ্যাঙ্গো দ্বারা অব্যাহতিপ্রাপ্ত নয় তাদের ব্যবহারকারীর দ্বারা আন্তঃবিবাহিত স্ট্রিংয়ের মধ্যে প্রবেশ করা যেতে পারে; যদি কেউ তাদের ব্যবহারকারীর নামটিকে "{{evil_code}}" হিসাবে সেট করে থাকে তবে কৌণিক এটিকে আনন্দের সাথে চালাবেজ্যাঙ্গো পালানোর চেয়ে আপনি যদি কোনও চরিত্র ব্যবহার করেন তবে তা ঘটবে না।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.