使用AngularJs通過指令更改ng-options

Question

我有一個下拉框，其中顯示了一些任意鍵值對。 問題在於，在作用域中僅存在鍵，並且必須將其轉換為相應的鍵值對。

到目前為止，我有一個（至少對我而言）外觀漂亮的解決方案，您可以在這里以JSFiddle的形式進行檢查。

在我的HTML代碼中，我想編寫如下代碼：

<div data-ng-app="myApp" ng-strict-di>
    <div data-ng-controller="myController">
        <select as-relative-ranking data-ng-model="myRating">
        </select>
    </div>
</div>

我的控制代碼如下所示：

app.controller('myController', ['$scope', function($scope) {
    $scope.myRating = 2;
}]);

為了獲得鍵值對之間的鏈接，我編寫了以下指令：

app.directive('asRelativeRanking', [function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            var relativeRatingOptions = [{
                description: 'Good',
                value: 1
            }, {
                description: 'Better',
                value: 2
            }];

            scope._asRelativeRatingOptions = relativeRatingOptions;

            // ToDo: Set the data-ng-options value a way that lets angular really use it.
            element.attr('data-ng-options', 'relativeRating.description for relativeRating in _asRelativeRatingOptions track by relativeRating.value');

            // format text going to view (model to view)
            ngModel.$formatters.push(function(value) {
                return value == null ? value : relativeRatingOptions.filter(function(relativeRating) {
                    return relativeRating.value === value;
                })[0];
            });

            // format text from view (view to model)
            ngModel.$parsers.push(function(option) {
                return option == null ? option : option.value;
            });
        }
    }
}]);

不幸的是，設置element.attr不起作用，因此角度會尊重它。 在DOM中，我可以看到該語句，但是angular不會對其進行處理。 如果我將HTML重寫為此：

<select as-relative-ranking 
    data-ng-model="myRating"
    data-ng-options='relativeRating.description for relativeRating in _asRelativeRatingOptions track by relativeRating.value'>
</select>

一切正常，但是我想從指令中更改ngOptions，以便我的HTML保持整潔。

Answer 1

的HTML

<div ng-controller="Ctrl">
    <div>
        <h2>Without directive</h2>
        <label>Ferries</label>
        <select ng-model="ferry" ng-options="ferry.Id as ferry.Description for ferry in ferries">
            <option style="display: none" value="">-- Choose ferry --</option>
        </select>
        <br/>
        <label>Routes</label>
        <select ng-model="route" ng-options="route.Code as route.Name for route in routes">
            <option style="display: none" value="">-- Choose route --</option>
        </select>
    </div>
    <div>
        <h2>With directive (working now!)</h2>
        <dropdown title="Choose ferry" label="Ferries" array="ferries" opt-value="Id" opt-description="Description"></dropdown>
        <dropdown title="Choose route" label="Routes" array="routes"  opt-value="Code" opt-description="Name"></dropdown>
    </div>

app.js

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

function Ctrl($scope){

    $scope.ferries = [
        {Id: 1, Description: "ferry1"}, 
        {Id: 2, Description:"ferry2"}, 
        {Id: 3, Description: "ferry3"}
    ];

    $scope.routes = [
        {Code: "RT1", Name: "route1"}, 
        {Code: "RT2", Name:"route2"}, 
        {Code: "RT2", Name: "route3"}
    ];
}

app.directive('dropdown', function(){
    return {
        restrict: 'E',
        scope: {
            array: '='
        },
        template:   '<label>{{label}}</label>' +
                    '<select ng-model="ngModel" ng-options="a[optValue] as a[optDescription] for a in array">' +
                        '<option style="display: none" value="">-- {{title}} --</option>' +
                    '</select>',
        link: function (scope, element, attrs) {
            scope.label = attrs.label;  
            scope.title = attrs.title;
            scope.optValue = attrs.optValue;
            scope.optDescription = attrs.optDescription;
        }
    };
});

演示點擊這里