自定義AngularJS指令將不會正確繪製

我想將角度選擇列表包裝成一個簡單的指令，這將允許我一起繪製選擇列表和標籤。自定義AngularJS指令將不會正確繪製

我遇到了兩個問題。

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

來源

2014-09-22 geography_guy

我相信你需要使用ngOptions： '= ngOption'沒有@ – Scott 2014-09-22 17:53:06

對不起，完全誤讀了。我認爲你的ngOptions表達式是錯誤的。它需要是我認爲完全合格的表達。請查看此文檔。 https://docs.angularjs.org/api/ng/directive/select – Scott 2014-09-22 18:08:46

試試這個，終於。對不起，我沒有先這樣做。

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

和你的div應該是

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

來源

2014-09-22 18:14:01 Scott

我發現這個問題。

在我的指令模板中，我將展開一個角度表達式作爲我選擇列表中ng-options指令的參數。但是，我的指令無法訪問我用來構建我的ng選項列表的變量。我需要傳遞變量下來到我的指令範圍（我選擇把它的數據），我在我的角度表達了對本地名（數據）：

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>

來源

2014-09-22 20:26:39

自定義AngularJS指令將不會正確繪製

回答

相關問題