Using AngularJS 1.2.16, unique issue with data escaping for href links

Question

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;
    });
}
};

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>

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.

Can we assume that the fields that currently display HTML will always display it? — Harris, Jan 07 '16 at 16:26
Are you using `ng-bind-html` in your template? http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu — 321zeno, Jan 07 '16 at 16:30
see the that is showing up is coming from another site, my site is pulling in that data. but angular doesnt like that a href and displays it as it is, making it ugly. i need some way to make it so angular doesnt do this. i tried ng-ref and bunch of others but doesnt help if its coming in as from the get go. — Edgar, Jan 07 '16 at 16:35

Harris · Accepted Answer · 2016-01-07T21:06:59.867

2

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

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);
    });
});

And in your view

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

Edit: 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.

edited Jan 07 '16 at 21:06

answered Jan 07 '16 at 16:36

Harris

1,775
16
19

do i do that inside the $scope.search = function() { } function where i have multiple calls at? or can i put it right above the commented //UserService.getUsersWithID.....etc. ? – Edgar Jan 07 '16 at 16:38
If you know that it will always be used as HTML in the view, I would just swap it right in the resolve function. It ultimately just needs to be done before the view tries to bind to it, and it just seemed the most obvious place to me. – Harris Jan 07 '16 at 16:40
it worked. you are a godsend! how would i make it open on a next page though? should i throw target="_blank" in there? – Edgar Jan 07 '16 at 16:42
In plain HTML, I don't see why you couldn't do that, though I honestly haven't tried that with Angular, and don't know how it deals with it. It'd probably be easiest to do that by just editing the HTML string before trusting it. It might generate a different instance of your app, but if the links are external anyway, then go for it. – Harris Jan 07 '16 at 16:45
i put target='_blank' into the td tag and it says unknown attribut – Edgar Jan 07 '16 at 19:05
The target attribute is for `a` elements. It's meaningless on a `td` element. – Harris Jan 07 '16 at 19:08
i added a filter and got it, but i tried to use the for each and my accordian disappeared and the dropdown boxes no longer work :/ – Edgar Jan 07 '16 at 19:24
If you're having further problems outside the scope of the original question, I'd suggest you post a new question. My answer was simply in regards to receiving an HTML response and rendering it with Angular. – Harris Jan 07 '16 at 19:25
has to do with your answer though. ill post a new question as well – Edgar Jan 07 '16 at 19:27

Using AngularJS 1.2.16, unique issue with data escaping for href links

1 Answers1

Linked