Angularjs - 如何绑定由javascript代码添加的html元素

27 浏览
0 Comments

Angularjs - 如何绑定由javascript代码添加的html元素

我想将由JavaScript代码添加的HTML元素与Angular事件和模型绑定。我的代码在这里。 https://jsfiddle.net/hq7qk48n/13/

代码如下：

        
        click1
        
click1 : {{ clickedTime1.toLocaleString() }}
        
click2 : {{ clickedTime2.toLocaleString() }}
        {{ text1 }}
        {{ text2 }}
function MyController($scope) {
    $scope.clickedTime1 = null;
    $scope.clickedTime2 = null;
    $scope.onClick = function () {
        var html = ' click2';
        $("#append").empty();
        $("#append").append(html);
        $scope.clickedTime1 = new Date();
    }
    $scope.onClick2 = function () {
        $scope.clickedTime2 = new Date();
    };
}

onClick2()不起作用，模型"text2"也没有更新。如何绑定onClick2函数和text2模型？需要编译HTML元素吗？如何实现？

0

1 答案

0 Comments

问题的原因是需要在AngularJS中将通过JavaScript代码添加的HTML元素进行绑定。解决方法是通过添加$event对象来传递调用元素的信息，并使用$compile服务来编译新元素。

首先，在调用方法的元素上添加$event：

click1

然后，在方法中添加$event：

$scope.onClick=function($event){

接下来，需要将元素转换为AngularJS元素：

var el=angular.element(' click2');

然后，使用jQuery将元素添加到目标元素中：

$($event.currentTarget).empty();
$($event.currentTarget).append(el);

然后，将新元素进行编译：

$compile(el)($scope);

最后，确保在调用方法时也添加$event对象：

$scope.onClick2 = function () {
    $scope.clickedTime2 = new Date();
};

虽然在控制器中使用DOM元素可能不是最佳实践，但有时候这样做是有效的。这就是解决该问题的方法。

0