Question

我想将角度事件和模型绑定到javascript代码附加的html元素。

我的代码在这里。 https://jsfiddle.net/hq7qk48n/13/

<div ng-app>
    <div ng-controller="MyController">
        <input type="text" ng-model="text1">
        <a href="#" ng-click="onClick()">click1</a>

        <div id="append"></div>
        <p ng-if="clickedTime1">click1 : {{ clickedTime1.toLocaleString() }}</p>
        <p ng-if="clickedTime2">click2 : {{ clickedTime2.toLocaleString() }}</p>
        <p>{{ text1 }}</p>
        <p>{{ text2 }}</p>
    </div>
</div>


function MyController($scope) {
    $scope.clickedTime1 = null;
    $scope.clickedTime2 = null;

    $scope.onClick = function () {
        var html = '<input type="text" ng-model="text2" name="text"> <a href="#" ng-click="onClick2()">click2</a>';
        $("#append").empty();
        $("#append").append(html);
        $scope.clickedTime1 = new Date();
    }

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

onClick2（）不起作用。并且模型“text2”未更新。如何绑定onClick2函数和text2模型？

需要编译一个html元素吗？怎么样？

Answer 1

这有点棘手，因为你在新元素中有一个ng-click。我们需要处理两件事。

正确添加元素
让您的新元素看到范围

首先，我们将从您的元素调用方法开始。您需要在呼叫中添加$ event

    <a href="#" ng-click="onClick($event)">click1</a>

$ event对象将为您提供有关调用元素的信息。

您还需要将其添加到方法

    $scope.onClick=function($event){

接下来，您的元素需要使用范围，因此我们需要将其转换为元素。否则只是html会好的。

    var el=angular.element('<input type="text" ng-model="text2" name="text"> <a href="#" ng-click="onClick2()"/>click2</a>');

现在你可以使用一个小的jquery，但是就像目标元素一样，只需角度就可以了。

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

此时您会看到您的更改，但绑定将无法正常工作，因为它未附加到范围，因此我们需要对其进行编译。您需要将$ compile服务器添加到控制器

    function MyController($scope,$compile) {

现在我们可以使用该服务来编译新元素

    $compile(el)($scope);

你现在应该看到一切都按照你期望的方式运作

    function MyController($scope,$compile) {
$scope.clickedTime1 = null;
$scope.clickedTime2 = null;

$scope.onClick = function ($event) {
    var el = angular.element('<input type="text" ng-model="text2" name="text"> <a href="#" ng-click="onClick2()">click2</a>');
    $($event.currentTarget).empty();
    $($event.currentTarget).append(el);
    $compile(el)($scope);
    $scope.clickedTime1 = new Date();
}

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

}

并且不要忘记将$ event添加到您的通话中。

我没有使用您的确切代码，但我在测试时对此进行了测试，并且验证效果非常好。在控制器中使用DOM元素可能不是最佳实践，但有时它只是起作用。你就是这样做的。

Angularjs - 如何绑定到javascript代码附加的html元素

1 个答案: