Question

我正在使用此cordova plugin在Ionic App中启动外部网址。这是我的代码，效果很好。

<a class="orange" href="#" onclick="window.open('http://www.myurl/privacy-policy', '_system', 'location=yes'); return false;">Privacy Policy</a>

但是我想在URL中使用数据绑定。

如何实现以下目标：

 <a class="orange" href="#" onclick="window.open('http://www.myurl/{{privacy.policy}}', '_system', 'location=yes'); return false;">Privacy Policy</a>

它只是打印出来就像是一个字符串。我尝试过使用引号但是所有内容都要么打破它或打印出一个字符串。

Answer 1

Here是一个使用相同概念制作的Plunker。我将onclick更改为ng-click并处理控制器中的窗口。

app.js：

var app = angular.module('plunker', []);

app.controller('mainCtrl', function($scope, $http) {

    $scope.getWindow = function() {
        window.open('https://www.google.com/search?q='+ $scope.input.search, '_system', 'location=yes');
    }
});

的index.html：

<body ng-controller="mainCtrl">
    <input type="text" ng-model="input.search" />

    <p><a class="orange" href ng-click="getWindow()">Open Google</a></p>
</body>

用户输入查询，点击链接后，Google会在新窗口中启动，并在网址中显示查询。

Answer 2

我认为您希望从非角度html部分访问角度范围，然后您需要使用angular.element($0).scope()来访问范围。

 <a class="orange" href="#" onclick="window.open('http://www.myurl/'+ angular.element($0).scope().privacy.policy, '_system', 'location=yes'); return false;">
Privacy Policy</a>

如果您当前的代码是角度js，请使用ng-click代替onclick

 <a class="orange" href="#" ng-click="window.open('http://www.myurl/'+ privacy.policy, '_system', 'location=yes'); return false;">
Privacy Policy</a>

Answer 3

请参阅JSFiddle或要点：

myApp.filter('hrefToJS', function ($sce, $sanitize) {
    return function (text) {
        var regex = /href="([\S]+)"/g;
        var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
        return $sce.trustAsHtml(newString);
    }
});

在您的html模板中：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>Before</h1>

        <p ng-bind-html="html"></p>
        <p ng-bind-html="plaintext"></p>
         <h1>After</h1>

        <p ng-bind-html="html | hrefToJS"></p>
        <p ng-bind-html="plaintext | linky | hrefToJS"></p>
    </div>
</div>

您的数据绑定到范围：

myApp.controller('MyCtrl', function ($scope) {
    $scope.html = "This a link: <a href='https://www.google.com'>Google</a> :)";
    $scope.plaintext = "This is a link: https://www.google.com :) "
});

您需要为此添加ngSanitize，但如果您确实需要，也可以删除这些部分。

在onclick url中使用数据绑定

3 个答案: