我想要完成的是制作一个能够使用数组或对象模型生成选择下拉列表的指令。我从我的服务器获取一个对象数组，我想要的是生成我的模板，只使用“user_id”来显示我的选项。这是我试过的：
HTML
<ng-select options="error.currentOrder.loggedPackages" selected="error.selected.user" object-field="user_id"></ng-select>
模板
<div class="select dropdown">
<button data-toggle="dropdown"><% selected %><i class="fa fa-angle-down"></i></button>
<ul ng-if="!objectField" class="dropdown-menu">
<li ng-repeat="option in options" ng-click="selectOption($index)"><% option %></li>
</ul>
<ul ng-if="objectField" class="dropdown-menu">
<li ng-repeat="option in options" ng-click="selectOption($index)"><% option[objectField] %></li>
</ul>
</div>
的Javascript
Application.directive('ngSelect', function () {
return {
restrict : 'E',
replace : true,
templateUrl : '/templates/directives/select.html',
scope : {
options: '=',
selected: '=',
objectField: '='
},
controller : ['$scope', function ($scope) {
$scope.selectOption = function (index) {
$scope.selected = $scope.options[index];
}
}],
link: function(scope, elem, attrs)
{
console.log(scope.objectField);
console.log('seleeeect');
}
}
});
Application.controller('ErrorReportingController', ['$scope', '$http', 'initData', 'ServerActions', function($scope, $http, initData, ServerActions) {
var error = this;
error.initData = initData;
error.selected = {
}
error.submitOrder = function (orderID) {
ServerActions.fetchData('/packing/error.action', {id : orderID}).then(
function (response) {
console.log(response.data);
error.currentOrder = response.data;
}
)
};
console.log(error.initData);
}]);
答案 0 :(得分：1)
因此，如果我理解正确，您需要使用动态模板的指令，这取决于options的类型和object-field属性的存在。此外，如果object-field嵌套，那将会很棘手:)
以下是我将如何解决它：
<强> HTML
<html ng-app="app">
<head>
<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appCtrl">
<h3>Array of Strings: {{selectedString}}</h3>
<app-select
options="stringModel"
selected="selectedString"
></app-select>
<h3>Array of Objects: {{selectedObject}}</h3>
<app-select
options="objectModel"
selected="selectedObject"
object-field="some.nested.field"
></app-select>
</body>
</html>
<强>的JavaScript
angular.module('app',[]).
controller('appCtrl', ['$scope', function($scope) {
$scope.stringModel = ["First", "Second", "Third"];
$scope.objectModel = [{some: {nested: {field: "First"}}}, {some: {nested: {field: "Second"}}}, {some: {nested: {field: "Third"}}}];
$scope.selectedString = $scope.stringModel[1];
$scope.selectedObject = $scope.objectModel[2];
}]).
directive('appSelect', ['$compile', function($compile) {
return {
scope: {
'options': '=',
'selected': '='
},
controllerAs: 'vm',
bindToController: true,
controller: [function() {
this.visible = false;
this.selectItem = function($index) {
this.selected = this.options[$index];
this.visible = false;
};
}],
compile: function(template, attrs) {
var isObject = !!attrs['objectField'],
html = '<div class="select dropdown">' +
'<button data-toggle="dropdown">' +
'{{vm.' + (isObject ? 'selected.' + attrs.objectField : 'selected') + '}}' +
'<i class="fa fa-angle-down" ng-click="vm.visible=!vm.visible"></i>' +
'</button>' +
'<ul class="dropdown-menu" ng-if="vm.visible">' +
'<li ng-repeat="option in vm.options track by $index" ng-click="vm.selectItem($index)">' +
'{{' + (isObject ? 'option.' + attrs.objectField : 'option') + '}}' +
'</li>' +
'</ul>' +
'</div>';
return function postLink(scope, el) {
el.html(html);
$compile(el.contents())(scope);
};
}
}
}]);
如果您需要通过URL加载模板，也可以。由于在加载模板后调用了编译函数，因此您可以在编译函数中用“{{selected}}”和“{{option}}”替换某些占位符：
...
templateUrl: 'template.html',
compile: function(template, attrs) {
var isObject = !!attrs['objectField'],
selected = isObject ? 'selected.' + attrs.objectField : 'selected',
option = isObject ? 'option.' + attrs.objectField : 'option';
html = template.html().
replace('{{selected}}', '{{vm.' + selected + '}}').
replace('{{option}}', '{{' + option + '}}');
return function postLink(scope, el) {
el.html(html);
$compile(el.contents())(scope);
};
}
...
<强> template.html
<div class="select dropdown">
<button data-toggle="dropdown">
{{selected}}<i class="fa fa-angle-down" ng-click="vm.visible=!vm.visible"></i>
</button>
<ul class="dropdown-menu" ng-if="vm.visible">
<li ng-repeat="option in vm.options track by $index" ng-click="vm.selectItem($index)">{{option}}</li>
</ul>
</div>
<强> Plunker
有关您可以在此处reed的动态模板的更多信息：