javascript - 无法在 ng-click 函数上获取 ng-bind-html 下拉值

Question

我是Angularjs的新手，我可以在Jquery中做到这一点，但我想学习Angularjs。

我有下拉菜单，我使用ng-bind-html来获取下拉值并将该值更新为ng-bind-html它工作正常。 但是当我从下拉列表中选择值并在控制台日志中对其进行控制台时，它显示为 null。

但是当我使用硬编码值更新下拉列表并选择该值时，它会正确记录在日志中。

HTML 代码:

<div ng-app="myApp">
<div ng-controller="addComplaintCtrl">
 <select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl">
     <!--<option value="">-Select-</option>
     <option value='00'>Other</option>-->
  </select>
  <input type="button" class="btn btn-primary btn-block" ng-click="complaintSubmitEvent();" value="Submit Complaint">
 </div> 

 </div>

Angular 代码:

<script>
  var app = angular.module('myApp',['ngSanitize']);

  app.controller("addComplaintCtrl",function($scope,$sce){

  $scope.pdl=$sce.trustAsHtml('<option value="">-Select-</option><option value="Sales" >Sales</option>');

  $scope.complaintSubmitEvent=function(){
        //alert(0);
        console.log($scope.product_name);

  }

  })
  </script>

下面是jsfiddle链接。 ng-bind-html

Answer 1

您必须编译 ng-bind-html 所做的更改，您可以创建一个类似的指令

app.directive('compile',function($compile, $timeout){
    return{
        restrict:'A',
        link: function(scope,elem,attrs){
            $timeout(function(){                
                $compile(elem.contents())(scope);    
            });
        }        
    };
});

$timeout 用于在 ng-bind-html 完成其工作后运行编译函数

现在你可以简单地将compile作为select的属性与ng-bind-html

<select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl" compile >

Working fiddle