javascript - ng-bind-html无法正常工作

a.html

<div ng-bind-html="htmlElement()"></div>

controller.js

$scope.htmlElement = function(){
  var html = '<input type="text" ng-model="myModel" />';
  return $sce.trustAsHtml(html);
}

但是当我想使用获取文本输入的值时

alert($scope.myModel);

它说myModel是未定义的。仅当我动态添加文本输入时才会发生。

如何获得该文本输入的价值？

最佳答案

我建议您改为使用带有指令的DOM操作。

在您的controllers.js中：

app.directive("myHtml", function(){
   return {
       restrict: 'E',
       template: '<input type="text" ng-model="myModel" />',
       link: function(scope, attr){
           scope.myModel = 'Input text here';
       }
   }
});

app.controller('listCtrl', function($scope) {

    $scope.showInputText = function(){
        alert($scope.myModel);
    }
});

在您的HTML中：

<div ng-controller="myCtrl">
    <my-html><my-html>
    Your input: {{myModel}}
    <button ng-click="showInputText()">Show Input Text</button>
</div>