اذهب إلى المحتوى
  • 0

كيفية استخدام angular.js و Express Handlebars معاً

Bassel Jhr

السؤال

لدي مشروع مبني باستخدام node.js وأقوم باستخدام express handlebars. وقمت بإضافة angular.js إلى المشروع أيضاً لإضافة بعض الخصائص من طرف المستخدم ولكن المشكلة بأن كل من angular و handlebars يستخدمان نفس الصيغة من الأقواس: {{hello}} لذلك يتم التعامل مع المحتوى من handlebars بدلاً من angular.js ويظهر العديد من الأخطاء بسبب ذلك.

كيف يمكنني حل هذه المشكلة؟ وهل يمكن فعلاً استخدام express handlebars و angular معاً؟

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يمكنك استخدام هذا الحل ،حيث AngularJS يسمح بتغيير رموز البداية / النهاية لاستيفاء النص كما يلي:

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

ثم يمكنك استخدامه في القالب الخاص بك:

<div>{[{message}]}</div>

كما يمكنك مراجعة توثيق angular الخاص ب$ interpolateProvider

كما يمكنك استخدام ng-bind كالآتي

<p ng-bind="user.profile.description"></p>

والذي يكون مشابه للآتي

<p>{{user.profile.description}}</p>

كما يمكنك مراجعة توثيق Angular الخاص ب ng-bind

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

يمكنك الإبقاء على نفس ال style الخاص بال angular والتغيير فقط في أسلوب الكتابة في الtemplate Handlebars عن طريق إنشاء raw helper كالتالي

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

ثم يمكنك استخدامه عن طريق أربع أقواس {{{{ كما في المثال التالي

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

يمكنك القيام بذلك بالشكل التالي من خلال إنشاء مساعد helper في Express Handlebars:

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

واستخدمه في نموذج hbs الخاص بك عن طريق وضعه في أربع أقواس {{{{ كالتالي:

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...