Question

我想让我的Bootstrap模态与AngularJS一起使用。一种模式是

    <div id="addToPlaylist" class="modal hide fade" aria-hidden="true" aria-labelledby="addToPlaylistLabel" role="dialog">
        <div class="modal-header">
                <h3>My Modal</h3>
            </div>
            <div class="modal-body">
MODAL BODY
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>

它会将歌曲添加到用户已有的播放列表中，或者创建新的播放列表。我希望将它与一组歌曲一起使用，但一次只能使用一首歌（现在）。

<div class="cell" ng-repeat="song in media.data">
</div> <!-- grid-wrapper -->

Angular控制器

'use strict';

angular.module('PortalApp')
  .controller('SongsCtrl', function ($scope, MediaService, $location, AudioPlayerAPI, FavoriteService) {

$scope.toggleFaves = function (song) {

  FavoriteService.toggle(song).success(function (response) {
    if (response.successFlag) {
      song.favorite = !song.favorite;        
    }
  });
}    

$scope.fetched = false;

});

我如何使这项工作？

P.S。我不想要jQuery，只需要Angular的jQuery Lite插件。

Answer 1

您应该查看Angular UI Bootstrap模式（http://angular-ui.github.io/bootstrap/#/modal）。传入和传出数据非常容易，而且它都可以使用Angular-way。

Answer 2

这是一个可重用的Angular指令，它将隐藏并显示一个Bootstrap模式。

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

用法示例＃1 - 这假设您要显示模态 - 您可以添加ng-if作为条件

<div modal-show class="modal fade"> ...bootstrap modal... </div>

用法示例＃2 - 它在模态可见属性

中使用Angular表达式

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

另一个例子 - 为了演示控制器交互，你可以向你的控制器添加这样的东西，它会在2秒后显示模态，然后在5秒后隐藏它。

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

我迟迟没有为这个问题做出贡献 - 在这里为另一个问题创建了这个指令。 Simple Angular Directive for Bootstrap Modal

希望这有帮助。

如何使用Bootstrap模式与AngularJS一起使用？

2 个答案: