Question

我的AngularJS应用程序中有一个按钮，当您单击该按钮时，会出现一个包含选择列表的引导程序弹出窗口。我正在尝试从存储在我的rootScope中的列表中填充此选择列表，数据被拉入弹出窗口但是选择列表未填充请参阅下面的代码

存储在rootScope中的硬编码列表

$rootScope.activeUsers = [{ userId: 1, userName: 'user1' }];

Popover HTML

                <div id="UsersPopover" style='display: none'>
                    <div class="arrow"></div>
                    <h3>Please select a user.</h3>
                    <select ng-model="selectedUserId" ng-options="user.userId as user.userName for user in $root.activeUsers"></select>
                    <select ng-model="selectedUserId" ng-options="user.userId as user.userName for user in activeUsers"></select>
                    <select ng-model="selectedUserId" ng-options="user.userId as user.userName for user in $parent.activeUsers"></select>
                    {{$root.activeUsers}} // data appears {{activeUsers}} // data appears
                    <p>{{dirmessage}}</p>
                </div>

打开popover HTML的按钮

 <button class="btn btn-info" data-placement="bottom" mypopover popover-html="#UsersPopover" popover-placement="bottom">Click to open popover</button>

Popover指令

app.directive('mypopover', function ($compile, $templateCache, $rootScope) {
return {
    restrict: "A",
    link: function (scope, element, attrs) {

        scope.activeUsers = $rootScope.activeUsers;

        scope.dirmessage = "the message has come through";

        var options = {
            trigger: 'click',
            html: true,
            placement: attrs.popoverPlacement,
            title: attrs.popoverTitle,
            content: function () {
                return $compile($(attrs.popoverHtml).html())(scope);

            }
        };
        $(element).popover(options);
    }
};

我已经尝试直接使用rootScope.activeUsers列表填充选择列表以及在我的指令中创建的activeUser列表，似乎都没有工作我没有收到任何错误，列表只是空白。

请有人帮我解决这个问题，因为我不明白为什么没有填充任何列表，因为数据出现在popover中。

在Popover AngularJS中填充SelectList

0 个答案: