Question

我将一些div添加到Angular controller内的HTML页面中：

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

和sayHi方法是Angular内的controller方法：

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

但是这些动态创建的Div中的ng-click不起作用！为什么呢？

Answer 1

而不是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中在客户端过滤它们可能是可以的。同样，这可能不是你的情况。我不知道你要做什么。

因此，在您的视图中，您可以使用过滤器将这些过滤器限制为前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>

在此视图的控制器中，使用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;
}

Answer 2

angular仅在第一次初始化时编译html ,, 如果你想重新编译它，你可以将$ compile服务注入你的控制器并像这样使用它

$compile(element)(scope)

但这不是以角度动态追加元素的正确方法你能告诉我你究竟想要建造什么吗？

动态创建的Div内部的角度ng-click不起作用

2 个答案: