Javascript ng选项作为指令参数

所以，我也问了同样的问题，很遗憾，没有人回答，所以，又来了

我正在尝试创建一个select指令，在这里我可以将ng选项作为参数发送

这是我的指令

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>

编辑2：

为更复杂的ng选项语句添加了错误

编辑3：

因此，我刚刚意识到，我正在将ngOptions设置为作用域上的双向数据绑定字段，因为这不是必需的，所以我将它从

=

更改为

@

，现在，我收到另一条错误消息

错误：[$compile:ctreq]找不到指令“ngOptions”所需的控制器“select”

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

编辑4：

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

控制器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>

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

这是其中一个控件的呈现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>

现场测试：

---

至少现在我正在渲染控件，现在，打开以显示控件上的一些值。语法

ng options=“x in sites1”

不正确

最简单的形式是数组中值的标签：

ng-options="x for x in sites1"

---

另外，请查看以查看所有允许的参数形式。

好吧，经过大量测试，我终于能够达到我想要的结果

我将把这个指令留给任何想使用它的人，只要它允许

设置所需的选项字符串

设置一个属性，以便在模型中存储完整对象时显示

禁用状态，仅显示模型值

值的内联编辑

var-app=angular.module（“app”，[]）；
app.controller（'testController'，['$scope'，函数（$scope）{
$scope.sites=JSON.parse（“[{”SITE\u CODE\“：\“1\”，““SITE\u NAME\”：“TEST 1\”，{”SITE\u CODE\“：“2\”，““SITE\u NAME\”：“TEST 2\”，“{”SITE\u CODE\“：“3\”，“SITE\u NAME\”：“TEST 3\”，“，“{”SITE\u CODE\”：“4\”，“SITE\u NAME\”）；
$scope.sites1=[“测试1”、“测试2”、“测试3”]；
}]);
app.directive（'dropDown'，function（）{
返回{
限制：'E'，
要求：'ngOptions'，
模板：函数（元素、属性）{
返回“”+
'' +
“{label}}:”+
'' +
'' +
“{ngModel[textValue]！==未定义？ngModel[textValue]：ngModel}”+
'单击此处进行编辑'+
'' +
'' +
'';
},
替换：正确，
范围：{
ngModel:“=”，
ngChange:“&”，
标签：“@”，
labelCol:“@”，
controlCol:“@”，
类型：“@”，
名称：“@”，
已禁用：“=”，
必需：“=”，
forEdit:“=”，
选项：“@”，
项目：“=”，
textValue:“@”
},
编译：函数（元素、属性）{
如果（！attrs.labelCol）attrs.labelCol='4'；
如果（！attrs.controlCol）attrs.controlCol='8'；
如果（！attrs.required）attrs.required=false；
如果（！attrs.disabled）attrs.disabled=false；
如果（！attrs.forEdit）attrs.forEdit=false；
如果（属性已禁用）
attrs.forEdit=“true”；
attrs.edit=！attrs.forEdit；
},
链接：函数（范围、元素、属性）{
},
}
})

您在这里拼写错了吗

forEdit&&！dsiabled

而不是

disabled

@muasif80谢谢，修复了错误抱歉，但它确实有效，因为我在数组中使用select作为值的标签，这是我在项目中的其他几个选择中使用的一句话。如您所见，我有两个下拉列表，一个是这句话，另一个是更简单的，

x in sites1

，在console@CJLopez当然，第一个

ng options=“x.SITE\u code as x.SITE\u NAME for x in sites”

（有效语法）很好，第二个带有

ng选项=“sites1中的x”

（无效语法）引发错误否，我也得到了该错误的错误>错误：[$parse:syntax]语法错误：标记“as”是表达式[x.SITE\u code as x.SITE\u NAME for x in sites]第13列的意外标记，从[as x.SITE\u NAME for x in sites]开始。

<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>

ng-options="x for x in sites1"