AngularJS-如何綁定到JavaScript代碼附加的HTML元素

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。 我們需要處理兩件事。

1. 正確添加元素
2. 讓您的新元素看到范圍

首先，我們將從您從元素中調用方法開始。 您將需要在通話中添加$ 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，但可以像在angular上那樣在目標元素上使用它。

    $($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元素可能不是最佳實踐，但有時它可以正常工作。 那就是你要做的。