ng init和ng选项html str问题angularjs

我必须在angularjs指令中动态创建一个选择列表。我有双引号ng init和ng选项，使用angular.element创建元素并附加到id为preview的div中。代码如下所示

$('button').click(function() {
     var ng_select_str = '<div class="col-sm-8" ng-init="options=[1,2,3]">' +
                             '<select class="form-control" id="inventory-qq" ng-model="inventory.qq" ng-options="opt as opt for opt in options"></select>' +
                         '</div>';

     var element = angular.element(ng_select_str);
     $('#preview').append(element);
});

$（“按钮”）。单击（函数（）{
变量ng_选择_str=''+
'' +
'';
var元素=角度元素（ng_select_str）；
$（“#预览”）。追加（元素）；
});

---

但是，“选择列表”渲染时没有任何选项值（选择列表为空）。我想知道如何解决这个问题。

您需要编译元素

var elm = angular.element(ng_select_str);
elm = $compile(elm)(scope);
$('#preview').append(elm);

您的指令应该如下所示：

var module = angular.module('app', []);

module.directive('myWidget',
    ['$compile'
        function($compile) {
            return {
                restrict: 'AE',
                link: function(scope, element, attrs) {
                    var elm = angular.element(ng_select_str);
                    elm = $compile(elm)(scope);
                    $('#preview').append(elm);
                }
            };
        }
    ]);

---

最好对这样的逻辑有一个指令，您可以在其中生成和编译动态内容

请参见下面的简单示例，但它需要更多的工作

var module=angular.module（'testApp'，[]）
.指令（'test'，函数（$compile）{
返回{
限制：'E'，
替换：正确，
模板：“添加选择框”，
控制器：函数（$scope$element）{
$scope.appendSelectBox=函数（）{
var el=$compile（“”）（$scope）；
$element.parent（）.append（el）；
};
}
};
});
module.controller（'crtl'，function（$scope）{}）

文本