2015-10-19 37 views
13

Sadece açısal için örnekler geçmekte ve openlayers Aşağıdaki örnekte genelinde HERE ve yönlendirici geldi:Açısal-sıhhileştirmenin amacı nedir?

<!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> 

örnek canlı örnek HERE olarak görülebilir.

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

yukarıdaki senaryonun amacı nedir:

Sorum dosyaları yükleniyor hakkında, oldukça aşağıda senaryo yüklenen neden anlamıyorum?

DÜZENLEME :: i git repo ve açısal HERE bu modül için buraya dokümanlar öğrendim. ama yine de bu betiğin amacını anlamıyorum, belgelerin tek bir örneği bile yok.

jQuery'ye adil bir şekilde kod yazdım, bu yüzden birisi bunu jQuery terimlerinde açıklayabilir mi?

cevap

23

angular-sanitize komut dosyasını eklerseniz, HTML'yi jetonlarla ayrıştırarak girdiler dezenfekte edilir. Tüm güvenli belirteçler (bir beyaz listeden), daha sonra düzgün şekilde kaçtı html dizesine geri serileştirilir. Bu, güvensiz girdinin döndürülen dizgeye dönüştürülmeyeceği anlamına gelir.

Aşağıdaki blog post'dan esinlenerek aşağıda küçük bir örnek ekledim. Bu komut dosyasını var app = angular.module("app", ["ngSanitize"]); ile çalıştırırsanız, html bağlantıları doğru bir şekilde oluşturulur. Bu ifadeyi açıklama ve Ancak, yorumsuz var app = angular.module("app", []); aşağıdaki hata iletisi ortaya çıkar: 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

sayesinde, küçük bir örnek verebilir? –

+1

"ng-sanitize" sadece html girişinin dinamik olduğu veya istemci girdisinden geldiği durumlarda yararlı olduğu anlamına mı geliyor? Bu yüzden, biz sadece html ve şablon url'lerimizi (kendi güvenilir alanımızdan (https) veya şablon önbelleğimizden) kullanarak, html'yi görüşlerimiz/direktiflerimize yüklemek için kullanırken ng-sanitize gerek yoktur? Ya da "ng-sanitize" nin kullanılması gereken başka durumlar var. – Wilt

+1

'ng-sanitize' statik html için gerekli değildir, ancak html girişi dinamik olduğunda veya doğrudan veya dolaylı olarak istemci girdisinden geldiğinde kullanılmalıdır. – Jaco