생성 된 URL에서 그래프로드

온라인 html/css/javascript 놀이터를 만들고 싶습니다. 코드가 그래프를 그리면 사용자가 브라우저에서이 그래프를로드 할 수있는 URL을 생성 할 수 있기를 원합니다. 순간 생성 된 URL에서 그래프로드

, 놀이터에서, 나는 기능 generateUrl로 연결되는 버튼이 있습니다 그런 다음

$scope.generateUrl = function() { 
    urls.create({ 
     // allCode is a string like "<html><body><canvas ...>...</canvas><script>...</script></html>" 
     content: $scope.allCode 
    }).success(function (url) { 
     alert(url._id) 
    }); 
};

을, 나는 브라우저에서 localhost:3000/urls/58a56d0962bd39979d142e27 같은 URL의 ID로로드 할 :

그러나

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider 
     .state('urls', { 
      url: '/urls/{id}', 
      template: "{{url.content}}", 
      controller: 'UrlCtrl', 
      resolve: { 
       url: ['$stateParams', 'urls', function ($stateParams, urls) { 
        return urls.get($stateParams.id); 
       }] 
      } 
     })

은 상기 코드는 오히려 그래프보다 열을 나타낸다 또한 index.ejs의 <ui-view></ui-view>에 삽입됩니다. 이 동작은 예상되지만 사용자가 www.mysite.com/urls/58a56d0962bd39979d142e27을로드 할 때 보길 원하는 것이 아닙니다.

누구든지 생성 된 URL에서 그래프를로드하도록 설정하는 방법을 알고 있습니까?

출처

2017-02-16 SoftTimur

Strict Contextual Escaping 서비스를 사용해야한다고 생각합니다.이 서비스는 $sce으로 알려져 있습니다.

SCE (Strict Contextual Escaping)는 특정 상황에서 AngularJS가 해당 컨텍스트에 사용할 수있는 것으로 표시된 값을 갖도록 바인딩하는 모드입니다. 이러한 컨텍스트의 한 예는 ng-bind-html을 통해 사용자가 제어하는 임의의 html을 바인딩하는 것입니다. 이러한 컨텍스트는 권한있는 컨텍스트 또는 SCE 컨텍스트라고합니다.

따라서 일반 보간 대신 ngBindHtml 지시문을 사용할 수 있습니다.

<div ng-bind-html="url.content"></div>

또는, 당신은 또한 당신의 url 해결 기능에 $sce를 주입하고 trustAsHtml 방법 호출 할 수

resolve: { 
    url: ['$sce', '$stateParams', 'urls', function ($sce, $stateParams, urls) { 
     return $sce.trustAsHtml(urls.get($stateParams.id)); 
    }] 
}

나는 당신의 HTML 코드가 html 및 body 태그가 포함 된 경우 원하지 무엇을 모르겠어요합니다. 어쩌면 그걸 제거해야 할거야.

출처

2017-02-16 11:58:47

사실, 우리는'ng-bind-html'과'$ sce.trustAsHtml'을 동시에 사용해야한다는 것을 깨달았습니다 ... – SoftTimur

답변

관련 문제