1

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. enter image description here

4
  • Need to see your templates.
    – Brian
    Jan 7 2016 at 16:26
  • Can we assume that the fields that currently display HTML will always display it?
    – Harris
    Jan 7 2016 at 16:26
  • Are you using ng-bind-html in your template? stackoverflow.com/questions/18340872/…
    – 321zeno
    Jan 7 2016 at 16:30
  • see the <a href.....> 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 <a href =.....> from the get go.
    – Edgar
    Jan 7 2016 at 16:35
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.

9
  • 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 7 2016 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 7 2016 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 7 2016 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 7 2016 at 16:45
  • i put target='_blank' into the td tag and it says unknown attribut
    – Edgar
    Jan 7 2016 at 19:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.