एचटीएमएल पृष्ठों को गतिशील रूप से AngularJS

Question

हाय मुझे एक समाधान समाधान ठीक से नहीं मिला। कृपया मेरी मदद करें।

मेरे पास पृष्ठ में ui-selects के साथ एक एकल पृष्ठ एप्लिकेशन है, मूल रूप से यह निर्देशिका सूची के लिए है। उपयोगकर्ता फ़ोल्डरों का चयन करेगा और आखिर में जब वह सूची में एक HTML फ़ाइल का चयन करेगा, तो मैं एक यूआरएल उत्पन्न कर रहा हूं और मुझे अपने स्पा में एचटीएमएल फाइल दिखाना है। मैं टेक्स्ट फाइलों को प्रदर्शित करने में सक्षम था, लेकिन मुझे नहीं पता कि एचटीएमएल फाइलों को कैसे प्रदर्शित किया जाए। मैंने एनजी-बाइंड-एचटीएमएल की कोशिश की, लेकिन यह नहीं पता कि इसे कैसे प्रदर्शित किया जाए।

मैं $ http.get पद्धति का उपयोग करके एचटीएमएल की सामग्री हो रही है और एक चर "contentHTML" कहा जाता है में html सामग्री के भंडारण मैं प्रदर्शित करने के लिए मुझे लगता है कि

Answer 1

आपका मुद्दा कोणीय सफ़ाई के साथ है। यह आपको ng-bind-html का उपयोग नहीं करने देगा जब तक कि आप अपनी HTML सामग्री को एक विशेष चर में चिपकाएं जो विश्वसनीय HTML के रूप में चिह्नित है। कोणीय आपको ऐसा करता है ताकि आप जान सकें कि आप स्पष्ट रूप से कोणीय को बता रहे हैं कि यह मार्कअप प्रस्तुत करना ठीक है।

यह औसत डेवलपर को गलती से उपयोगकर्ता इनपुट को अनदेखा करने से बचाने में मदद करता है, जो बहुत खतरनाक होगा। आप नहीं चाहते हैं कि उपयोगकर्ता इनपुट फ़ील्ड में जावास्क्रिप्ट सबमिट कर रहे हों और फिर अपना ऐप उस स्क्रिप्ट को सीधे पृष्ठ पर प्रस्तुत करें। यदि ऐसा होता है, तो दुर्भावनापूर्ण स्क्रिप्ट तब चलती है जब rendered और सभी प्रकार के विनाश का कारण बन सकता है।

आपको अपने ऐप की निर्भरताओं में ngSanitize मॉड्यूल शामिल करने की आवश्यकता है।

var app = angular.module('myApp', ['ngSanitize']); 

अपनी स्क्रिप्ट संदर्भ में कोणीय-स्वच्छ lib शामिल करने के लिए मत भूलना।

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script> 

तो फिर तुम के रूप में $sce सेवा का उपयोग कर प्रस्तुत करने के लिए सुरक्षित अपने HTML सामग्री को चिह्नित करने की जरूरत है।

app.controller('myController', function ($scope, $sce) { 
    $scope.trustedHtml = $sce.trustAsHtml(contentHTML); 
}); 

केवल तभी ng-bind-html काम करेगा।

<div ng-bind-html="trustedHtml"></div> 

डेमो: http://codepen.io/Chevex/pen/xGYydr?editors=101

Answer 2

कि आप ngInclude लिए देख रहे हैं की जरूरत है।
आपको AJAX अनुरोध को संभालने की भी आवश्यकता नहीं है, यह आपके लिए किया गया है।

बाहरी HTML खंड प्राप्त करता है, संकलित करता है और इसमें शामिल होता है।

प्रयोग

<ANY 
    ng-include="path_of_your_file.html" 
    [onload="string"] 
    [autoscroll="string"]> 
    ... 
</ANY> 

महत्वपूर्ण बातें ध्यान रखें:

• आपका HTML फ़ाइल एक ही डोमेन पर होने की जरूरत है या यह जटिल हो जाता है (डॉक्स देखें)
• यह वह जगह है एक टेम्पलेट, जिसका अर्थ है:
  • सभी संबंधित पथ, वर्तमान पथ के सापेक्ष हो जाएगा आयातित टेम्पलेट के पथ के लिए नहीं उस में
  • कोणीय मूल्यांकन किया जाएगा

Answer 3

contentHtml से अपने html प्रदर्शित करने के लिए आप अपने HTML पृष्ठ पर एक div के लिए तरह की जरूरत है:

<div ng-controller="htmlBucket"> 
    {{content}} 
</div> 

फिर अपने जावास्क्रिप्ट में आप इस

होना चाहिए

app.registerCtrl('htmlBucket', function($scope) 
{ 
    $scope.content = $sce.trustAsHtml(contentHTML); 
}); 

अपने .js, jquery और कोणीय निर्भर शामिल न करें आपके एचटीएमएल

<script src="lib/jquery/jquery.js"></script> 
<script src="lib/angular/angular.js"></script> 

उम्मीद है कि यह मदद करता है।

Answer 4

आप यूई-राउटर का उपयोग करके जो खोज रहे हैं उसे प्राप्त कर सकते हैं। Here इसके लिए लिंक है।

उपयोगकर्ता द्वारा फ़ोल्डरों का चयन करने के बाद ui-select का उपयोग करके। यूआरएल को अपने पूर्वनिर्धारित में बदलने के लिए अपने नियंत्रक में एक ईवेंट ट्रिगर लिखें। $ राज्य प्रदाता का उपयोग कर। आप भी वही here

आशा है कि मदद करता है के लिए अपने उदाहरण देख सकते हैं