Angular js / ionic app url 链接和功能链接不起作用答案

【问题标题】：Angular js / ionic app url links and function links not workingAngular js / ionic app url 链接和功能链接不起作用
【发布时间】：2015-05-06 17:38:34
【问题描述】：

我正在开发一个基于 Angular js / ionic 的应用程序，我是新手。

在我的应用程序中，我检索 Strava 数据并通过 .append();
将其注入 div 这就是我在 .append() 中的内容：

$("#list").append("<div><p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p><p><a on-tap='myFunction()'>trigger_function_link</a></p></div>");

上面的代码运行良好，除了其中两件事。
(1) 当我按下第一个链接时，URL 会在浏览器的新页面中打开，但不会在我的应用程序中打开。
我尝试了不同的东西（org.apache.cordova.inappbrowser、javascript、angular js 解决方案）但没有正在工作。

(2)当我按下第二个链接时，点击功能没有被触发。

当我将上面的 div 直接复制粘贴到我的 HTML 中（所以它没有被注入）时，一切正常，url 链接在新页面或我设备上的本机浏览器应用程序中打开，并且正确触发了 angular on-tap 功能。

<div><p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p><p><a on-tap='Strava()'>trigger_function_link</a></p></div>

现在最大的问题是，当我的代码被注入 .append() 时，我的链接怎么会不起作用，有没有解决办法？

谢谢！！

【问题讨论】：

标签： javascript angularjs cordova ionic-framework angular-ng-if

【解决方案1】：

为什么要使用 Angular 已经为其编写了指令的 jQuery。

我建议您使用ng-if 指令，请将该div 保留在您的html 中，并带有showDiv 之类的标志。每当 showDiv 为 true 时，div 将被添加到 DOM（显示在 html 上），当该标志为 false 时，div 将从 DOM 中删除（将被隐藏）

<div ng-if="showDiv">
  <p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p>
  <p><a on-tap='myFunction()'>trigger_function_link</a></p>
</div>

更新

您正在从 ajax 获取数据（应该使用 $http 而不是使用 jQuery 来完成 Ajax 调用），将该数据存储在 $scope.objs = data 中并多次附加相同的 div，我' d 建议您使用ng-repeat 来渲染所有divs，这样会更有效。

<div id="list">
    <div ng-repeat="obj in objs">
        <p>{{obj.clubmember}}<a href='strava.com/athletes/...' ; target='_blank'>url_link</a></p>
        <p><a on-tap='myFunction()'>trigger_function_link</a></p>
    </div>
</div>

【讨论】：

您好，感谢您的帮助！我在一个包含 20 个项目的数组中有 strava 数据，我使用 .forEach 循环函数从 strava 获取数据并将其插入到主 div 中。 with .append() 你的代码也可以吗？
你是如何渲染这 20 个项目的？使用ng-repeat?
不，我有一个简单的 div
，然后使用 javascript 中的以下代码，我提取 strava 数据并将其填充到 #list div $.getJSON( stravaClubActivities, function(data) {data.forEach(function(obj) {$("#list").append("

"+ obj.clubmember+"url_link

trigger_function_link

");});
所以你应该使用 $http 而不是 $.getJSON 并且你可以使用 ng-repeat 在 UI 上呈现数据
你必须忘记 AngularJS 数据绑定的 Jquery 开发方法。在 angularJS 中附加内容不是正确的方法。

【解决方案2】：

附加内容不是标准的 AngularJS。如果您想“附加 HTML”，请参考提供者$compile

否则，您应该将您的内容定义为 @pankajparkar 提供的 AngularJS HTML 模板

【讨论】：