javascript - 动态创建的 Div 中的 Angular ng-click 不起作用

标签 javascript angularjs

我在 Angular controller 中将一些 div 添加到我的 HTML 页面中:

jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');

sayHi方法是controller中的Angular方法:

$scope.sayHi = function () {
        alert("hi");
};

但是 ng-click 在这些动态创建的 Div 中不起作用!为什么?

最佳答案

所以不是 jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');

你应该:

function myTag() {

    return {
        link: function(element) {
            element.after('<div ng-click="sayHi()">Hi</div>');
        }
    }
}
angular.module('yourModule').directive('myTag', myTag);

然后在你看来,而不是做这样的事情:

<div id="mytag"></div>

你应该:

<my-tag></my-tag>   or   <div my-tag></div>

更新 正如@Claies 指出的那样,这也不是加载更多或无限滚动的干净方法。

我不知道你要做什么的细节,所以我会做一些假设。

假设我们知道您只有大约 100 条记录要显示。用户可能只想看到前 20 条记录,但用户应该能够看到之后的 20 条记录,并再次...直到显示所有 100 条记录。

在这种情况下,将所有这些记录加载到浏览器并在 Angular 的客户端过滤它们可能没问题。同样,这可能不是您的情况。我不知道你要做什么。

因此,在您的 View 中,您可以使用过滤器将这些限制为前 20 条记录。然后执行将过滤器增加 20 条记录的操作。当筛选限制大于或等于记录数时,隐藏查看更多按钮。

<div ng-repeat="record in vm.records | limitTo : vm.display">
    {{ record }}
</div>
<button ng-show="vm.enableLoadMore" ng-click="vm.showMore()">Load More</button>

在此 View 的 Controller 中,使用 controllerAs语法:

function RecordsController() {

     this.records = [ . . . ]; // your records

     this.display = 20; // number of records to display

     var self = this;

     Object.defineProperty(this, 'enableLoadMore', { get: function() {
         return self.records >= self.display;
     }})
}

RecordsController.prototype.showMore = function() {
    this.display += 20;
}

关于javascript - 动态创建的 Div 中的 Angular ng-click 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31495309/

相关文章:

javascript - 是否可以对在浏览器中运行的 JavaScript 进行沙箱处理?

javascript - jquery 如何给帖子添加评论

angularjs - Electron + AngularJS View 未找到

angularjs - 定期验证的 Angular 电子邮件自定义

javascript - 如何使用 angularjs 和 ui-router 正确显示页眉/页脚?

javascript - 从外部链接打开 Accordion 面板

javascript - (可选)在对象中添加键

javascript - 安卓 WebView : highlight a specific word in a page using javascript?

javascript - Angular 2 访问组件属性时出现问题

rest - 如何在AngularJS $ resource中使用路径变量而不是请求参数