2015-10-19 18 views
13

tôi chỉ cần đi qua các ví dụ cho một góc và openlayers chỉ thị HERE và đã xem qua ví dụ sau:Mục đích của khử trùng góc cạnh là gì?

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

Ví dụ có thể được coi là một ví dụ sống HERE.

Câu hỏi của tôi là về các tập tin được nạp, tôi không hoàn toàn hiểu tại sao kịch bản dưới đây được nạp:

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

mục đích của kịch bản trên là gì?

EDIT ::: tôi phát hiện ra các repo git và các tài liệu ở đây cho module này ở góc HERE. nhưng tôi vẫn không hiểu mục đích của tập lệnh này, tài liệu thậm chí không có một ví dụ đơn lẻ.

Tôi đã mã hóa trong jQuery một chút công bằng, vì vậy ai đó có thể giải thích điều này trong các thuật ngữ jQuery?

Trả lời

23

Nếu bạn bao gồm tập lệnh angular-sanitize, đầu vào được vệ sinh bằng cách phân tích cú pháp HTML thành mã thông báo. Tất cả các thẻ an toàn (từ danh sách trắng) sau đó được tuần tự hóa trở lại chuỗi html được thoát đúng cách. Điều này có nghĩa là không có đầu vào không an toàn nào có thể biến nó thành chuỗi trả về.

Tôi đã bao gồm một ví dụ nhỏ bên dưới được lấy cảm hứng từ điều này blog post. Nếu bạn chạy tập lệnh này với var app = angular.module("app", ["ngSanitize"]);, các liên kết html được hiển thị chính xác. Tuy nhiên, nếu bạn nhận xét tuyên bố này ra ngoài và bỏ ghi chú var app = angular.module("app", []); được thông báo lỗi sau đây được nâng lên: 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

cảm ơn, bạn có thể cho một ví dụ nhỏ? –

+1

Điều đó có nghĩa là 'ng-sanitize' chỉ hữu ích trong trường hợp đầu vào html là động hoặc đến từ đầu vào của khách hàng? Vì vậy, khi chỉ sử dụng html tĩnh và mẫu url (từ tên miền đáng tin cậy của chúng tôi (https) hoặc từ bộ nhớ cache mẫu) để tải html trong chế độ xem/chỉ thị của chúng tôi, không cần phải 'ng-sanitize'? Hoặc có những trường hợp khác mà nên sử dụng 'ng-sanitize'. – Wilt

+1

'ng-sanitize' là không cần thiết cho html tĩnh, nhưng nên được sử dụng khi đầu vào html là động hoặc đến từ đầu vào của khách hàng, trực tiếp hoặc gián tiếp. – Jaco

Các vấn đề liên quan