我在 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/