2015-10-19 5 views
13

मैं सिर्फ एक कोणीय के लिए उदाहरण के माध्यम से जा रहा था और openlayers निर्देश HERE और निम्न उदाहरण भर में आया था:कोणीय-sanitize का उद्देश्य क्या है?

<!DOCTYPE html> 
<html ng-app="demoapp"> 
    <head> 
    <script src="../bower_components/openlayers3/build/ol.js"></script> 
    <script src="../bower_components/angular/angular.min.js"></script> 
    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 
    <script src="../dist/angular-openlayers-directive.js"></script> 
    <link rel="stylesheet" href="../bower_components/openlayers3/build/ol.css" /> 
    <script> 
     var app = angular.module('demoapp', ['openlayers-directive']); 
     app.controller('DemoController', [ '$scope', function($scope) { 
      angular.extend($scope, { 
       center: { 
        lat: 0, 
        lon: 0, 
        autodiscover: true 
       } 
      }); 
     }]); 
    </script> 
    </head> 
    <body ng-controller="DemoController"> 
    <openlayers ol-center="center" height="400px"></openlayers> 
    <h1>Center autodiscover example</h1> 
    <form> 
     Latitude : <input type="number" step="any" ng-model="center.lat" /> 
     Longitude : <input type="number" step="any" ng-model="center.lon" /> 
     Zoom : <input type="number" step="any" ng-model="center.zoom" /> 
     <button ng-click="center.autodiscover=true">Discover position</button> 
    </form> 
    </body> 
</html> 

उदाहरण एक जीवित उदाहरण HERE के रूप में देखा जा सकता है।

<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 

ऊपर स्क्रिप्ट का उद्देश्य क्या है:

मेरा प्रश्न फ़ाइलों को लोड किए जाने के बारे में, मैं काफी समझ में नहीं आता क्यों नीचे स्क्रिप्ट लोड किए जा रहे है?

संपादित ::: मैं Git रेपो और कोणीय HERE में इस मॉड्यूल के लिये दस्तावेज यहां पता चला। , लेकिन मैं अभी भी इस स्क्रिप्ट के उद्देश्य को समझ नहीं पा रहा हूं, दस्तावेज़ीकरण में एक भी उदाहरण नहीं है।

मैंने jQuery में एक उचित बिट कोड किया है, तो क्या कोई इसे jQuery शर्तों में समझा सकता है?

उत्तर

23

यदि आप angular-sanitize स्क्रिप्ट शामिल करते हैं, तो HTML को टोकन में HTML को पार्स करके इनपुट किया जाता है। सभी सुरक्षित टोकन (श्वेतसूची से) को फिर से एचटीएमएल स्ट्रिंग से बचने के लिए क्रमबद्ध किया जाता है। इसका मतलब यह है कि कोई असुरक्षित इनपुट इसे लौटाई गई स्ट्रिंग में नहीं बना सकता है।

मैंने इस blog post से प्रेरित नीचे एक छोटा सा उदाहरण शामिल किया है। यदि आप इस स्क्रिप्ट को var app = angular.module("app", ["ngSanitize"]); के साथ चलाते हैं तो HTML लिंक सही ढंग से प्रस्तुत किए जाते हैं। हालांकि, अगर आप इस बयान बाहर टिप्पणी और टिप्पणी हटाएं var app = angular.module("app", []); निम्न त्रुटि संदेश उठाया है: Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script> 
 
    <!-- BEGIN disable refresh --> 
 
    <script type="text/javascript"> 
 
    //Including ngSanitize ensures html links get properly sanitized 
 
    var app = angular.module("app", ["ngSanitize"]); 
 
    //If you use this code instead no html links get displayed 
 
    //var app = angular.module("app", []); 
 

 
    app.controller("mainController", function($scope) { 
 
     var main = this; 
 

 
     main.links = [ 
 
     "<a href='http://google.com'>Google</a>", 
 
     "<a href='http://odetocode.com'>OdeToCode</a>", 
 
     "<a href='http://twitter.com'>Twitter</a>" 
 
     ]; 
 
    }); 
 
    </script> 
 

 
</head> 
 

 
<body ng-app="app"> 
 
    <section ng-controller="mainController as main"> 
 
    <nav> 
 
     <ul> 
 
     <li ng-repeat="link in main.links" ng-bind-html="link"> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </section> 
 
</body> 
 

 
</html>

+0

धन्यवाद, आप एक छोटा सा उदाहरण दे सकते हैं? –

+1

क्या इसका मतलब यह है कि 'ng-sanitize' केवल उन मामलों में उपयोगी है जहां HTML इनपुट गतिशील है या क्लाइंट इनपुट से आता है? तो जब हमारे विचार/निर्देशों में एचटीएमएल लोड करने के लिए केवल स्थिर एचटीएमएल और टेम्पलेट यूआरएल (हमारे अपने विश्वसनीय डोमेन (https) से या टेम्पलेट कैश से) का उपयोग करते समय 'ng-sanitize' की आवश्यकता नहीं है? या ऐसे अन्य मामले हैं जहां 'एनजी-सैनिटाइज 'का उपयोग किया जाना चाहिए। स्थिर एचटीएमएल के लिए – Wilt

+1

'एनजी-सैनिटाइज 'की आवश्यकता नहीं है, लेकिन जब एचटीएमएल इनपुट गतिशील होता है या क्लाइंट इनपुट से सीधे या परोक्ष रूप से आता है तो इसका उपयोग किया जाना चाहिए। – Jaco

संबंधित मुद्दे