Angular ng-href JavaScript函数

Question

I need to set href to Javascript function. When I click it, nothing happens, but when I hover over link it displays:

unsafe:javascript:ShowManagementdDiv('65','a60f2a16-267e-418d-bb14-d88de3a33b5f','0');

The table data is built dynamically in my angular controller:

contractorService.getemrtabulation()
                .success(function (data) {
                    $scope.emrcolumns = data.EMRTabulationColumns;
                    repeatRow = '<td align="center" valign="middle" style="background-color:Transparent;border-color:Black;border-width:1px;border-style:Solid;padding:5px;white-space:nowrap;"><a class="IncidentColumn" ng-href={{e.hyper}}>Click Here to Review EMR Document</a></td>';
                    firstRow = '<td>EMR Document</td>';
                    for (i = 0; i < $scope.emrcolumns.length; i++) {
                        repeatRow = repeatRow + '<td>{{e.' + $scope.emrcolumns[i].vchAssociatedDetailColumn + '}}</td>';
                        firstRow = firstRow + '<td>' + $scope.emrcolumns[i].vchColumnHeaderText + '</td>'
                    }
                    firstRow = '<tr>' + firstRow + '</tr>';
                    $scope.emrdetail = data.EMRTabulationDetail;
                    angular.forEach($scope.emrdetail, function (value, key) {
                        value.dteExpirationDate = convertDate(value.dteExpirationDate);
                        value.dteDateCompleted = convertDate(value.dteDateCompleted);
                        value.dteEffectiveDate = convertDate(value.dteEffectiveDate);
                    });
                    angular.forEach($scope.emrdetail, function (value, key) {
                        contractorService.getimage(value.EMRDetailID, value.dteEffectiveDate)
                    .success(function (data) {
                        $scope.emrdetail[key].hyper = data;
                    });
                });
                    $scope.emrTable = '<table>' + firstRow + '<tr style="text-align:center" ng-repeat="e in emrdetail">' + repeatRow + '</tr></table>';
                    firstRow = '';
                    repeatRow = '';
                });

I use this to call it in the html:

<div class="row row-relative">
        <div class="col-md-12">
            <div>{{emrQuestion.EMRTabulationID}}{{emrQuestion.vchTabulationSequenceLetter}}.&nbsp;{{emrQuestion.vchClassPropertyName}}</div><br />
            <div dynamic="emrTable"></div><br /><br />
        </div>
    </div> 

The function is in a <script> tag on the page:

function ShowManagementdDiv(imageTypeID, Guid, selectedYear) {
    var TargetWidth = 950;
    var TargetHeight = 670;
    bModalPopupActivated = true; window.clearTimeout(t);
    DisplayModalDivExitWithClickSave('box', TargetWidth, TargetHeight, 'http://localhost/PECIMS/DocumentManagement.aspx?eid=' + imageTypeID + '&Edx=' + Guid + '&y=' + selectedYear, 'Close', 'Click to close window.   ');
}

Here is the C# code that creates the link:

public async Task<ActionResult> GetImage(int emrDetailID, string docDate)
        {
            var columns = await CommonClient.GetEMRTabulationColumnsForClusterID(876);
            var getcolumn = columns.FirstOrDefault(c => c.EMRTabulationColumnID == 1);
            int? imageTypeId = getcolumn.EdataFileImageTypeID;
            UserInfo.intDocumentManagementMode = 13;
            UserInfo.intPerspectiveCompanyID = UserInfo.intMajorID;
            UserInfo.intPerspectiveCompanyTypeID = UserInfo.intMajorCompanyType;
            UserInfo.SegmentID = emrDetailID;
            UserInfo.dteDocumentDate = DateTime.Parse(docDate);
            var token = await CompanyClient.SaveRecallData(UserInfo);
            string strPathAndQuery = Request.Url.PathAndQuery;
            string strUrl = Request.Url.AbsoluteUri.Replace(strPathAndQuery, "/");
            string LinkToImagesApp = "";
            LinkToImagesApp = AppendProtocolAndHostHeadersPathToWebConfigPath("LinkToImagesApplication");
            string javaLink = strUrl + LinkToImagesApp + "/DocumentManagement.aspx?eid=";
            string docLink;
             string address = "javascript:ShowManagementdDiv('" + imageTypeId + "','" + token + "','0');";
             return Json(address, JsonRequestBehavior.AllowGet);
        }

I am assuming that the issue is that Angular deems the Javascript as "unsafe" . Any assistance is greatly appreciated.

Answer 1

In order to use the Javascript function in my href I had to add the following to my app.js file:

app.config([
    '$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|javascript):/);
    }
]);