javascript - ng-options 作为指令参数

Question

所以，我在 this question 上问了同样的问题，遗憾的是，没有人回答，所以，又来了

我正在尝试创建一个 select 指令，我可以在其中将 ng-options 作为参数发送。

这是我的指令

app.directive('dropDown', function () {
    return {
        restrict: 'E',
        template: function (element, attrs) {
            return '<div class="col-sm-{{labelCol}} control-label">' +
                        '<label>{{label}}:</label>' +
                    '<div>' +
                    '<div clas="col-sm-{{controlCol}}">' +
                        '<label style="cursor:pointer" ng-show="!edit && forEdit" ng-disabled="disabled" ng-click="edit = true;">{{ngModel}}</label>' +
                        '<i ng-show="!edit && forEdit && !disabled" class="fa fa-pencil-square-o" style="cursor:pointer" aria-hidden="true" ng-click="edit = true;"></i>' +
                        '<select name="{{name}}" ng-change="ngChange" ng-blur="edit = false" ng-show="edit || !forEdit" class="form-control" ng-model="ngModel" ng-required="required" ng-options={{options}}/>' +
                    '</div>'
        },
        replace: true,
        scope: {
            ngModel: '=',
            ngChange: '&',
            label: '@',
            labelCol: '@',
            controlCol: '@',
            type: '@',
            name: '@',
            disabled: '=',
            required: '=',
            forEdit: "=",
            options: "@"
        },
        link: function (scope, element, attrs) { },
        compile: function (element, attrs) {
            if (!attrs.labelCol) attrs.labelCol = '4';
            if (!attrs.controlCol) attrs.controlCol = '8';
            if (!attrs.required) attrs.required = false;
            if (!attrs.disabled) attrs.disabled = false;
            if (!attrs.forEdit) attrs.forEdit = false;
            attrs.edit = !attrs.forEdit;
        }

    }
})

这是指令的实现

<div class="row">
    <drop-down ng-model="site" for-edit="true" label="Site Test" options="x.SITE_CODE as x.SITE_NAME for x in sites"></drop-down>
</div>
<div class="row">
    <drop-down ng-model="site1" for-edit="true" label="Site Test" options="x for x in sites1"></drop-down>
</div>

我得到了同样的回应

Error: [$parse:syntax] Syntax Error: Token 'in' is an unexpected token at column 3 of the expression [x in sites1] starting at [in sites1].

Error: [$parse:syntax] Syntax Error: Token 'as' is an unexpected token at column 13 of the expression [x.SITE_CODE as x.SITE_NAME for x in sites] starting at [as x.SITE_NAME for x in sites].

知道如何实现我想要的结果吗？

编辑1:

如果有帮助，这里是应该填充选择的数组

$scope.sites = JSON.parse("[{\"SITE_CODE\":\"1\",\"SITE_NAME\":\"SITE1\",},{\"SITE_CODE\":\"2\",\"SITE_NAME\":\"SITE2\"},{\"SITE_CODE\":\"3\",\"SITE_NAME\":\"SITE3\"},{\"SITE_CODE\":\"4\",\"SITE_NAME\":\"SITE4\"}]");
$scope.sites1 = ["SITE1", "SITE2", "SITE3", "SITE4"];

编辑 2:

为更复杂的 ng-options 语句添加了错误

编辑 3:

所以，我刚刚意识到，我将 ngOptions 设置为作用域上的双向数据绑定(bind)字段，因为这不是必需的，所以我将它从 = 更改为 @ 现在，我收到了另一条错误消息

Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found!

这不合理，因为我确实设置了ngOptions，我可以在编译时验证它

编辑 4:

所以，经过一些测试，我终于可以渲染我的控件了，但遗憾的是，没有值

选择显然在 Controller div 上

<div class="content" ng-controller="testController">   
    <div class="row">
        <drop-down ng-model="site" for-edit="true" label="Site Test" options="x for x in sites"></drop-down>
    </div>
    <div class="row">
        <drop-down ng-model="site" label="Site Test" options="x for x in sites"></drop-down>
    </div>
    <div class="row">
        <drop-down ng-model="site1" for-edit="true" label="Site Test" options="x for x in sites1"></drop-down>
    </div>
</div>

Controller 确实有这个集合

app.controller('testController', ['$scope', function ($scope) {
    $scope.sites = JSON.parse("[{\"SITE_CODE\":\"1\",\"SITE_NAME\":\"SITE1\",},{\"SITE_CODE\":\"2\",\"SITE_NAME\":\"SITE2\"},{\"SITE_CODE\":\"3\",\"SITE_NAME\":\"SITE3\"},{\"SITE_CODE\":\"4\",\"SITE_NAME\":\"SITE4\"}]");
    $scope.sites1 = ["SITE1", "SITE2", "SITE3", "SITE4"];
}]);

但是我渲染的控件没有任何值

这是其中一个控件的渲染 html

<div ng-model="site" label="Site Test" options="x for x in sites" class="ng-isolate-scope ng-valid">
    <div class="col-sm-4 control-label"><label class="ng-binding">Site Test:</label></div>
    <div class="col-sm-8">
        <label style="cursor:pointer" ng-show="!edit &amp;&amp; forEdit" ng-disabled="disabled" ng-click="edit = true;" class="ng-binding ng-hide"></label>
        <i ng-show="!edit &amp;&amp; forEdit &amp;&amp; !disabled" class="fa fa-pencil-square-o ng-hide" style="cursor:pointer" aria-hidden="true" ng-click="edit = true;"></i>
        <select name="" ng-change="ngChange" ng-blur="edit = false" ng-show="edit || !forEdit" class="form-control ng-pristine ng-valid ng-valid-required ng-touched" ng-model="ngModel" ng-required="required" ng-options="x for x in sites">
            <option value="?" selected="selected"></option>
        </select>
     </div>
</div>

至少现在我正在渲染我的控件，现在，在它们上显示一些值

Answer 1

语法 ng-options="x in sites1" 不正确。

在最简单的形式中，它应该是数组中值的标签:

ng-options="x for x in sites1"

另请查看 angular docs for ngOptions查看所有允许的参数形式。