附加Html代码中的Angular ng-model不起作用

Angular ng-model in appended Html code not working

本文关键字：Angular ng-model 不起作用 Html 代码 附加      更新时间：2023-09-26

这是我的代码。在这里，我动态地在按钮点击上添加html。但是我给出的ng模型不起作用。

有人能解决我的问题吗

$scope.addParam = function(selected) {
  if (selected == "bucket_policy_privacy_status") {
    var myElement = angular.element(document.querySelector('#inputParameters'));
    myElement.append('<input type="text" style="width:220px" class="form-control" name="" disabled="" value=' + selected + '> <select class="form-control" style="width:196px" ng-model="fields.privacyStatus" ><option value="range">Range</option><option value="public">Public</option><option value="private">Private</option></select> <br><br>');
      $scope.$watch('fields.privacyStatus', function() {
        var privacy_status = $scope.fields.privacyStatus;
        alert();
        var status = {
          "term": {}
        }
        status.term[selected] = privacy_status;
        output.push(status);
      });
    $('#params option[value="bucket_policy_privacy_status"]').remove();
    $scope.input.select = "bucket_owner";
  }
};

您需要更改以下内容:

在动态插入HTML时，你需要使用angular的$compile选项来计算angular的属性/表达式。

在将元素添加到DOM之后添加下面的行应该可以达到目的:

$compile(angular.element('.form-control'))($scope);

它基本上只是让angular知道有一些新的东西它应该评估并开始观察。

(不要忘记在模块依赖项中添加$compile)。

除此之外，我假设你实际上已经在你的$scope上添加了一个名为fields的对象?

您可以做的另一件事是在表单上使用ng-change而不是使用$watch。绑定在ng-change上的函数将在每次表单中的一个选择更改时调用。

要进一步阅读，请查看以下内容:https://docs.angularjs.org/api/ng/service/编译美元

我认为这是行不通的，你只添加了dom，这就是全部，没有绑定。一种方法是创建一个指令来做这件事，或者在模板中添加"ng-hidden"的输入，然后点击show。

相关文章：