사용자 정의 AngularJS 지시문이 제대로 그려지지 않습니다.

Question

각도 선택 목록을 선택 목록과 레이블을 함께 그릴 수있는 간단한 지시문으로 래핑하려고합니다.

두 가지 문제가 있습니다.

1. 선택 목록 옵션은 내가 내 지시 태그 속성에 나타내는 데이터로 채워지지 않는 나의 지시로 아래로 통과하려고

2. ngModel 속성을 채우기되지 않습니다.

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

myApp.controller('Ctrl', ['$scope', function($scope){ 
    $scope.currentBusinessStructure = ''; 

    $scope.businessStructure = ['Monarchy', 'Corporation']; 
}]); 

myApp.directive('specialSelect', [function(){ 
return { 
    restrict: 'A', 
    transclude: true, 

    template: 
       '<label ng-transclude></label> \ 
       <select ng-model="currentBusinessStructure" ng-options="{{ngOptions}}" class="form-control"> \ 
       </select> \ 
       <br>INSIDE MY DIRECTIVE: {{ngModel}} : {{ngOptions}}', 
    scope: { 
     ngOptions: '@ngOption', 
     ngModel: '=' 
    } 
}; 
}]); 

내 fiddle here

Answer 1

마지막으로,이 시도 확인하시기 바랍니다. 미안해, 처음부터하지 않았어.

<select ng-model="ngModel" ng-options="label for label in ngOptions" class="form-control"> 

그리고 당신의 사업부 내가 문제를 발견

 <div special-select ng-model="currentBusinessStructure" ng-option="businessStructure">How is your business structured?</div> 

Answer 2

해야한다.

내 지시문 템플릿에서 필자는 선택 목록의 ng-options 지시문에 대한 인수로 각도 표현식을 확장했습니다. 그러나 내 지시문은 내 ng-options 목록을 작성하는 데 사용했던 변수에 액세스 할 수 없었습니다. 내 지시 범위에 해당 변수를 전달하는 데 필요한 (I 데이터를 호출하기로 결정했습니다), 그리고 내 각 표현에 그 지역의 이름 (데이터)를 가지고 : 당신이 ngOptions를 사용할 필요가 생각

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

myApp.controller('Ctrl', ['$scope', function($scope){ 
    $scope.currentBusinessStructure = 'Monarchy'; 

    $scope.businessStructure = ['Monarchy', 'Corporation']; 
}]); 

myApp.directive('specialSelect', [function(){ 
return { 
    restrict: 'A', 
    transclude: true, 

    template: '<label ng-transclude></label> \ 
       <select ng-model="ngModel" ng-options="{{ngOptions}}" class="form-control"> \ 
       </select> ', 
    scope: { 
     ngOptions: '@ngOption', 
     ngModel: '=', 
     data: '=' 
    } 
}; 
}]); 

<!--in html--> 
<div ng-controller="Ctrl"> 
    <div special-select ng-model="currentBusinessStructure" ng-option="item for item in data" data="businessStructure">How is your business structured?</div> 
</div>