我在codepen.io上发现了这个树选择（见下面的链接），我想在另一个函数中使用所选值的ID，但我无法正确获取它。例如，所选值“Tazzy”的ID是“1”（再次参见下面的链接）。我尝试过使用ng-controller但是当我这样做时，选择框就消失了，我不知道为什么。
HTML：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ui-select with tree navigation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.1/select.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
main {
margin: 80px auto;
width: 300px;
}
.ui-select-choices-row {
transition: background 0.1s ease, color 0.1s ease;
background: #fff;
color: #0099ff;
}
.ui-select-choices-row:hover {
background: #007acc !important;
color: #fff;
}
.option.ui-select-choices-row-inner {
padding: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.option.ui-select-choices-row-inner div {
padding: 6px 12px;
position: relative;
}
.selectize-dropdown {
margin-top: -3px;
overflow: hidden;
}
.selectize-dropdown-content {
overflow-x: auto;
}
.selectize-dropdown.group-tree .goto-child-group {
background: none;
border: none;
box-shadow: none;
color: rgba(0, 0, 0, 0.5);
height: 100%;
line-height: 1;
margin: 0;
padding: 8px;
position: absolute;
right: 0;
text-shadow: none;
top: 0;
transition: background .2s;
}
.selectize-dropdown.group-tree .goto-child-group:hover {
box-shadow: none;
background: rgba(0, 0, 0, 0.1);
border: none;
color: #fff;
}
.selectize-dropdown.group-tree .ui-select-breadcrumbs {
padding: 6px 12px;
margin: 0;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.selectize-dropdown.group-tree .ui-breadcrumb {
color: white;
cursor: pointer;
font-size: 12px;
}
.selectize-dropdown.group-tree .ui-breadcrumb:hover {
color: #ff9000;
}
.selectize-dropdown.group-tree .ui-breadcrumb:after {
content: '>';
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child {
color: white;
cursor: default;
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child:after {
content: ' ';
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<main ng-app="app" ng-init="model = {}">
<ui-tree-select model="model">
</ui-tree-select>
<script type="text/ng-template" id="/ui-tree-select.html">
<ui-select
ng-model="model.$selected"
ui-select-focuser
theme="selectize">
<ui-select-match placeholder="Select a group">
{{ $select.selected.title }}
</ui-select-match>
<ui-select-choices repeat="group in groups | filter: $select.search">
<div>
<span ng-bind-html="group.title | highlight: $select.search"></span>
<span ng-bind-html="'('+group.size+' users)'"></span>
<a href
ng-show="group.parent"
class="goto-child-group"
ng-click="loadChildGroupsOf(group, $select)">
<i class="fa fa-angle-right"></i>
</a>
</div>
</ui-select-choices>
</ui-select>
</script>
</main>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.1/select.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
使用Javascript：
angular.module('app', ['ui.select', 'ngSanitize'])
.directive('uiTreeSelect', [
'groupFactory',
'$timeout',
function (groupFactory, $timeout) {
return {
restrict: 'E',
scope: { model: '=' },
link: function (scope, el) {
scope.breadcrumbs = [{"id":0,"title":"All"}];
scope.groups = groupFactory.load(0);
scope.loadChildGroupsOf = function(group, $select) {
$select.search = '';
scope.breadcrumbs.push(group);
scope.groups = groupFactory.load(group.id);
scope.$broadcast('uiSelectFocus');
};
scope.navigateBackTo = function (crumb, $select) {
$select.search = '';
var index = _.findIndex(scope.breadcrumbs, {id: crumb.id});
scope.breadcrumbs.splice(index + 1, scope.breadcrumbs.length);
scope.groups = groupFactory.load(_.last(scope.breadcrumbs).id);
$select.open = false;
scope.$broadcast('uiSelectFocus');
};
},
templateUrl: '/ui-tree-select.html'
};
}
])
.directive('uiSelectFocuser', function ($timeout) {
return {
restrict: 'A',
require: '^uiSelect',
link: function (scope, elem, attrs, uiSelect) {
scope.$on('uiSelectFocus', function () {
$timeout(uiSelect.activate);
});
}
};
})
.factory('groupFactory', [
function () {
var data = {
0: [{"id":1,"title":"Tazzy","size":"57","parent":true},
{"id":2,"title":"Skimia","size":"67","parent":true},
{"id":3,"title":"Edgetag","size":"32539","parent":true},
{"id":4,"title":"Topicware","size":"898","parent":false},
{"id":5,"title":"Ailane","size":"83","parent":false},
{"id":6,"title":"Chatterbridge","size":"084","parent":false},
{"id":7,"title":"Wordtune","size":"8647","parent":false},
{"id":8,"title":"Demimbu","size":"2255","parent":false},
{"id":9,"title":"Plajo","size":"9466","parent":true},
{"id":10,"title":"Skynoodle","size":"0","parent":true}],
1: [{"id":21,"title":"Plajo","size":"1","parent":true},
{"id":22,"title":"Kwilith","size":"2071","parent":false},
{"id":23,"title":"Mydeo","size":"306","parent":false},
{"id":24,"title":"Jaxbean","size":"5","parent":false},
{"id":25,"title":"Photojam","size":"54","parent":false}],
2: [{"id":31,"title":"Blogtag","size":"97084","parent":false},
{"id":32,"title":"Browsetype","size":"06","parent":false},
{"id":33,"title":"Voonte","size":"9","parent":false},
{"id":34,"title":"Omba","size":"71","parent":false},
{"id":35,"title":"Kwilith","size":"2","parent":false}],
3: [{"id":41,"title":"Yodo","size":"2","parent":false},
{"id":42,"title":"Aibox","size":"2152","parent":false},
{"id":43,"title":"Jetwire","size":"8858","parent":false},
{"id":44,"title":"Eabox","size":"5","parent":false},
{"id":45,"title":"Camimbo","size":"36236","parent":false}],
9: [{"id":51,"title":"Feedbug","size":"28933","parent":false},
{"id":52,"title":"Aimbu","size":"09711","parent":false},
{"id":53,"title":"Avavee","size":"12","parent":false},
{"id":54,"title":"Eare","size":"8","parent":false},
{"id":55,"title":"Wikivu","size":"3","parent":false}],
10: [{"id":61,"title":"Tagpad","size":"46","parent":false},
{"id":62,"title":"Kamba","size":"4","parent":false},
{"id":63,"title":"Eimbee","size":"26669","parent":false},
{"id":64,"title":"Twitterlist","size":"95538","parent":false},
{"id":65,"title":"Rhycero","size":"05","parent":false}],
21: [{"id":71,"title":"Cogibox","size":"47","parent":false},
{"id":72,"title":"Dablist","size":"5","parent":false}]
};
return {
load: function (id) {
return data[id];
}
}
}
])
.run(['$templateCache', function ($templateCache) {
$templateCache.put('selectize/choices.tpl.html', [
'<div ng-show="$select.open"',
' class="ui-select-choices group-tree selectize-dropdown single">',
' <div ng-show="breadcrumbs.length > 1" class="ui-select-breadcrumbs">',
' <span class="ui-breadcrumb" ng-repeat="crumb in breadcrumbs"',
' ng-click="navigateBackTo(crumb, $select)">',
' {{crumb.title}}',
' </span>',
' </div>',
' <div class="ui-select-choices-content selectize-dropdown-content">',
' <div class="ui-select-choices-group optgroup">',
' <div ng-show="$select.isGrouped"',
' class="ui-select-choices-group-label optgroup-header">',
' {{$group}}',
' </div>',
' <div class="ui-select-choices-row">',
' <div class="option ui-select-choices-row-inner"',
' data-selectable="">',
' </div>',
' </div>',
' </div>',
' </div>',
'</div>'
].join(''));
}])
基本上，我的程序需要选择的ID才能打开另一个html窗口。我已经有了正确的javascript函数，我只需要通过使用其ID将所选值正确链接到该函数。在此之前，我使用了一个简单的选择标签和document.getElementById选项，但由于我切换到这个树选择菜单，我有点无能为力，因为我真的不熟悉角度。
谢谢！