1

我必须在 angularjs 指令中动态创建一个选择列表。我有双引号 ng-init 和 ng-options，使用 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);
});

但是选择列表呈现没有任何选项值（空选择列表）。我想知道如何解决这个问题。

4

2 回答 2

2

最好有针对此类逻辑的指令，您可以在其中生成和编译动态内容。

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

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>

于 2014-09-24T19:25:14.287 回答
0

您需要编译元素。

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);
                }
            };
        }
    ]);
于 2014-09-24T19:12:28.193 回答