AngularJS 将数据传递给引导模式 [英] AngularJS passing data to bootstrap modal

问题描述

我想我错过了一些东西，但不知道是什么.
基本上，我试图将一个对象传递给如下所示的模态，但是我没有得到传递的对象，而是将其设为空……所以我认为范围有问题，但我是 Angular 的新手，需要一些帮助.

控制器

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {$scope.selected = null;$scope.open = 函数(项目){$scope.selected = 项目；$log.info('Open' + $scope.selected);//获取正确的pass对象var modalInstance = $uibModal.open({templateUrl: 'myModalContent.html',控制器:'音乐视图模型'，尺寸:'lg'，解决: {项目:函数(){返回 $scope.selected;}}});};$scope.toggleAnimation = 函数 () {$scope.animationsEnabled = !$scope.animationsEnabled;};});

查看

<script type="text/ng-template" id="myModalContent.html"><div class="modal-header"><h3 class="modal-title">我是模态！</h3>
<div class="modal-body"><ul><li>{{ selected }}//总是为空

解决方案

我建议你传递你自己控制器的 scope 而不是再次传递相同的 controller，通过这样做，您也可以删除 resolve.

var modalInstance = $uibModal.open({templateUrl: 'myModalContent.html',scope: $scope,//将当前范围传递给模态尺寸:'lg'});

否则，您需要创建一个新的 controller 并在打开它时为 modal 分配该控制器.

I think I'm missing something but cannot figure what.
Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some help.

Controller

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {

$scope.selected = null;

$scope.open = function (item) {

    $scope.selected = item;

    $log.info('Open' + $scope.selected); // get right passes object

    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'musicViewModel',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.selected;
            }
        }
    });
};

$scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
};
});

View

<div class="row" ng-controller="musicViewModel">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                    {{ selected }} // always gets null
                </li>
            </ul>
        </div>
    </script>
</div>

解决方案

I'd suggest you to pass the scope of your own controller instead of passing same controller again, by doing that you can remove the resolve also.

var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope, //passed current scope to the modal
    size: 'lg'
});

Otherwise you need to create a new controller and assign that controller for modal while opening it.

这篇关于AngularJS 将数据传递给引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！