ng-init и ng-options html str issue angularjs

Question

Мне нужно динамически создавать список выбора в директиве angularjs. У меня есть двойная кавычка ng-init и ng-options, используя angular.element, чтобы создать элемент и добавить к div с id preview. код выглядит следующим образом:

$('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); 
}); 

однако рендеринг списка выбора без значения параметров (пустой список выбора). Интересно, как решить эту проблему.

Answer 1

Лучше иметь директиву для таких логик, где вы можете генерировать и компилировать динамическое содержимое.

См простой пример ниже, но для этого нужно немного больше работы

var module = angular.module('testApp', []) 
 
    .directive('test', function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     replace: true, 
 
     template: '<button ng-click="appendSelectBox()">add select box</button>', 
 
     controller: function($scope, $element) { 
 
     $scope.appendSelectBox = function() { 
 
      var el = $compile('<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>')($scope); 
 
      $element.parent().append(el); 
 
     }; 
 
     } 
 
    }; 
 
    }); 
 

 
module.controller('crtl', function($scope) {})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp" ng-controller="crtl"> 
 
    <test>text</test> 
 

 
</div>

Answer 2

Вам необходимо скомпилировать элемент.

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); 
       } 
      }; 
     } 
    ]);