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应该是

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

Answer 2

我发现了问题。

在我的指令模板中，我将扩展一个角度表达式作为我的选择列表中ng-options指令的参数。但是，我的指令无法访问我用来构建ng-options列表的变量。我需要将该变量传递到我的指令范围（我选择将其称为数据），并且我必须在我的角度表达式中使用该本地名称（数据）：

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>

自定义AngularJS指令不能正确绘制

2 个答案: