使用AngularJS 1.2.16，数据转义HREF链接唯一问题 [英] Using AngularJS 1.2.16, unique issue with data escaping for href links

问题描述

<一个href=\"http://stackoverflow.com/questions/34655663/having-issues-with-ng-href-i-can-use-target-blank-using-angularjs-1-2\">having与NG-HREF我可以使用目标= QUOT问题; _blank＆QUOT;使用AngularJS 1.2 ，老后却发现是怎么回事，导致我一个问题，我有一个具有手风琴内表的页面，在JS文件我有我的角度功能，我有这样的：

having issues with ng-href i can use target="_blank" using AngularJS 1.2 ,old post but found what is going on leading me to another question,I have a page that has a table inside an accordian, in the JS file i have my angular functions and i have this:

var CapitalRequestMultiMillInquiryController = function ($scope, $rootScope, $modal, $window, CapitalRequestService, PlantService) {

$rootScope.title = 'Capital Request Multi Mill Inquiry';
$scope.allMills = [];
$scope.selectedMill = '';
$scope.jobNumber = '';
$scope.description = '';
$scope.amount = '';
$scope.amountOperator = '';
$scope.openOnly = '';
$scope.projectManager = '';

//$scope.allUsers = [];

//UsersService.getUsersWithId().then(function(objectTypes) {
//    $scope.allUsers = objectTypes
//});

//$scope.openurl = function() {
//    $scope.openurl = function(url) {
//        $location.path(url, '_blank')
//    }
//}

PlantService.getPlantId().then(function (mills) {
    $scope.allMills = mills
});

$scope.search = function() {
    //for each mill

    CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.counce = results;
    });
    CapitalRequestService.searchMulti("http://filcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
         $scope.filer = results;
     });
    CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.tomahawk= results;
    });
    CapitalRequestService.searchMulti("http://tridentval.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.valdosta = results;
    });
    CapitalRequestService.searchMulti("http://tridentder.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.deridder = results;
    });
}
};

和我的HTML页面，我有这样的：

and my HTML page i have this:

   <tbody>
                    <tr ng-repeat="item in tomahawk">
                          <td>{{item.projectManager}}</td>
                          <td>{{item.jobNumber}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.totalAmount*1000 | currency}}</td>
                    </tr>
                </tbody>
            </table>

和我仍然有这个在我看来，这使我相信，这是从得到信息的URL都有心不是正确显示数据，因为我对为此采用了棱角分明的锚标记。如何将我逃避HREF的，这样我的数据会正常显示，可点击下载下一个页面上的图片角度约束上？我张贴另一个帖子较早，认为某事与这个目的。但我卸妆的一切，看到它仍然返回我的显示锚标记，这意味着它的其中源是和它推动了我。下面的图片是一个较旧的图片，他们是无法点击，当我把一切都要从我的应用程序在我的结束，只留下一个表中的数据拉动。

and i still have this in my view which leads me to believe that the URL that this is getting information from has an anchor tag that isnt displaying the data correctly because i am using angular on this end. how would i escape the angular contraints for href's such that my data will display normally and be clickable to download a picture on next page? i posted another post earlier and thought that something was up with this end. but i remover everything and saw that it was still returning the anchor tag in my display which means its where the source is and its pushing that to me. the picture below is an older picture they are not clickable when i take everything out of my app on my end, leaving just a table pulling in the data.

推荐答案

您需要让角知道你拥有的数据是可信的HTML，并将其绑定到 D 元素。

You'll need to let Angular know that the data you have is trusted HTML, and bind it to the td elements.

在你的控制器，你需要使用 $ SCE 与信任的HTML来替换HTML：

In your controller, you'll need to use $sce to replace the HTML with trusted HTML:

CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
    $scope.tomahawk = results;
    $scope.tomahawk.forEach(function(item){
        item.jobNumber = $sce.trustAsHtml(item.jobNumber);
        item.description = $sce.trustAsHtml(item.description);
    });
});

和在你看来

   <tbody>
                    <tr ng-repeat="item in tomahawk">
                          <td>{{item.projectManager}}</td>
                          <td ng-bind-html="item.jobNumber"></td>
                          <td ng-bind-html="item.description"></td>
                          <td>{{item.totalAmount*1000 | currency}}</td>
                    </tr>
                </tbody>
            </table>

编辑：我改变了对循环到foreach迭代，只是因为它似乎有点清洁。检查我的编辑历史，如果你想它以前的方式。

I changed the for-loop to a forEach iteration, simply because it seems a little cleaner. Check my edit history if you want the way it was before.

这篇关于使用AngularJS 1.2.16，数据转义HREF链接唯一问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！