在 onclick 中使用数据绑定 url

Question

我正在使用这个 cordova plugin to launch external urls in my 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

我想你想访问 angular 非 angular html 部分的范围，那么你需要使用 angular.element([=12=]).scope() 来访问范围。

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

如果您当前的代码在 angular 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 2

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

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>

用户输入一个查询，当 link 被点击时，google 在一个新的 window 中启动，查询在 url 中。

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('', '_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

using data binding in onclick url

javascript

data-binding

url

angularjs

cordova