ng-init 및 ng-options html str angularjs

Question

angularjs 지시문에 선택 목록을 동적으로 만들어야합니다. nag-init과 ng-option을 double quote했습니다. angular.element를 사용하여 요소를 만들고 미리보기 인 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); 
}); 

그러나 선택 목록은 옵션 값 (빈 선택 목록)없이 렌더링됩니다. 이 문제를 해결하는 방법을 궁금해.

Answer 1

당신이 생성 및 동적 내용을 편집 할 수 있습니다 이러한 논리에 대한 지침을 가지고하는 것이 좋습니다 :

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

귀하의 지시어는 다음과 같이 보일 것입니다.

아래의 간단한 예제를 참조하지만, 몇 가지 더 많은 작업을 필요로

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