当我使用 onsen ui 和 $().append 时，ng-click 不起作用答案

【问题标题】：ng-click not working when I use onsen ui and $().append当我使用 onsen ui 和 $().append 时，ng-click 不起作用
【发布时间】：2015-09-02 16:22:48
【问题描述】：

当我使用 JS 将 p 标签附加到 div 时，ng-click 不起作用。我的代码如下：

$("#newsArList").append("<p ng-click=\"myNavigator.pushPage(\'article.html\', { animation : \'slide\' } )\">Go To Article</p>");`

其实，我

console.log("<p ng-click=\"myNavigator.pushPage(\'./www/article.html\', { animation : \'slide\' } )\">1234</p>");`the result is `<p ng-click="myNavigator.pushPage('article.html', { animation : 'slide' } )">1234</p>

我只是把这个复制到<div id="newsArList"></div>，它就可以工作了。

我不知道这种情况的原因。有什么建议吗？

【问题讨论】：

原因是 Angular 需要知道 DOM 发生了变化，并对其进行编译，以发挥其魔力。只是不要那样做。使用角度，因为它意味着要使用。将 HTML 的 sn-p 放入页面中，将 ng-if="showStuff" 添加到元素中，并在您希望元素出现在页面中时将 $scope.showStuff 设置为 true。
谢谢你帮助我，但它不能解决我的问题。我的代码如下：<div class="articleList" id="newsArList" ng-if="showStuff">和$("#newsArList").append("<p ng-if=\"showStuff\" ng-click=\"myNavigator.pushPage(\'article.html\', { animation : \'slide\' } )\">1234</p>");结果是p标签会出现，但是当我点击它时，它不会转到article.html

标签： angularjs onsen-ui

【解决方案1】：

你使用 angular 指令，所以你必须将代码编译到 DOM 中：

$("#newsArList").append('<p ng-click="myNavigator.pushPage(\'article.html\', { animation : \'slide\' } )">Go To Article</p>');

ons.compile($("#newsArList")[0]);

如here所述：

ons.compile 函数将基于 HTML 的自定义元素转换为正常的 DOM 结构。大多数浏览器（尚）不支持自定义默认元素，每次都需要调用该函数奇迹发生了。

【讨论】：