مقدمة
واحدة من قوة AngularJS هي ميزة ربط ثنائية الاتجاه البيانات القوية. شيئان نستخدمه غالبًا هما NG-bind و ng-model للشكل.
ولكن في مشروعنا ، سنواجه هذا الموقف ، تحتوي البيانات التي يتم إرجاعها في الخلفية على علامات HTML مختلفة.
يحب:
$ scope.currentwork.description = "Hello ، <br> <b> إلى أين نحن ذاهبون اليوم؟ </b>"
نستخدم تعليمات مثل NG-Bind-HTML لربطها ، لكن النتيجة ليست ما نريد.
هذا كل شيء
مرحبا ، إلى أين نحن ذاهبون اليوم؟
ما يجب القيام به؟
بالنسبة للإصدار الزاوي 1.2 ، يجب أن نستخدم خدمة $ SCE لحل مشكلتنا. ما يسمى SCE هو اختصار "الهروب السياق الصارم". ترجم إلى الصينية "وضع سياق صارم" ويمكن فهمه أيضًا على أنه ربط آمن.
دعونا نرى كيفية استخدامه.
رمز وحدة التحكم:
$ http.get ('/api/work/get؟ workId =' + $ routeparams.workid) .Scecess (function (work) {$ scope.currentwork = work ؛}) ؛رمز HTML:
<p> {{currentwork.description}} </p> يحتوي المحتوى الذي نرجعه على سلسلة من علامات HTML. يتم عرض النتائج كما قلنا في بداية المقال. في هذا الوقت ، يجب أن نخبرها بالربط بأمان. يمكن أن يتم ذلك باستخدام $ sce.trustAsHtml() . تقوم هذه الطريقة بتحويل القيمة إلى القبول المميز وتستخدم "NG-Bind-HTML" بأمان. لذلك ، علينا أن نقدم خدمة $ SCE في وحدة التحكم الخاصة بنا
Controller ('TransferWorkStep2' ، ['$ scope' ، '$ http' ، '$ routeparams' ، '$ sce' ، function ($ scope ، $ http ، $ routeparams ، $ sce) {$ http.get ('/api/work/get؟ العمل ؛رمز HTML:
<p ng-bind-html = "currentwork.description"> </p>
يتم تقديم هذه النتيجة تمامًا على الصفحة:
مرحبا إلى أين نحن ذاهبون اليوم؟
يمكننا أيضًا استخدامه مثل هذا ، ونغلفه في مرشح واتصل به على القالب في أي وقت.
app.filter ('to_trusted' ، ['$ sce' ، function ($ sce) {return function (text) {return $ sce.trustashtml (text) ؛} ؛}]) ؛رمز HTML:
<p ng-bind-html = "currentwork.description | to_trusted"> </p>
لخص
ما سبق هو كل شيء عن توجيه NG-bind-HTML وخدمة $ SCE في AngularJS. آمل أن يساعدك ذلك في الدراسة أو العمل. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.