AngularJS将数据传递给引导模式

Posted

技术标签:

【中文标题】AngularJS将数据传递给引导模式【英文标题】:AngularJS passing data to bootstrap modal 【发布时间】:2016-01-22 01:49:08 【问题描述】:

我想我遗漏了一些东西,但不知道是什么。 基本上我试图将一个对象传递给下面的模态,但是我没有得到传递的对象,而是得到了 null ......所以我认为这是范围的问题,但我是 Angular 的新手,需要一些帮助。

控制器

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;
;
);

查看

<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>

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

@PankajParkar 您能否提供后一种解决方案以提供控制器的示例?我很难让它发挥作用。这是我的相关问题:***.com/questions/35350463/… 我认为下面的答案应该对你有所帮助..无论如何我会调查的。【参考方案2】:

当您使用解析时,地图被注入到给定的控制器中。

我建议您使用不同的控制器来处理模态功能 (separation of concerns)。

我还建议使用依赖注入来支持代码的缩小。 Angular 教程中的Step 5 将对此进行解释。

模态控制器的简化示例是。

(function () 

    'use strict';

    var app = angular.module('App');

    app.controller('musicDetailController',

                ['$scope', '$uibModalInstance', 'items',
        function ($scope, $uibModalInstance, items) 

            $scope.items = items;

        ]);
());

【讨论】:

是的,我同意你的看法。使用单独的控制器将允许正确管理代码。【参考方案3】:

您不能直接传递对象。

我已经尝试了上述所有解决方案,但并不十分满意。我通过编写一个简单的解析器解决了这个问题,它使您能够通过提供的解析函数将stringsobjects 直接传递给模态。

app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) 

    // Initialize $modal
    var $modal = this;

    // Open component modal
    $modal.open = function (component, size, data) 

        // Init modal
        var modalInstance = $uibModal.open(
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            component: component,
            size: size || 'md',
            resolve: parseResolve(data)
        );
    ;

    // Parse the resolve object
    function parseResolve(data) 
        if (typeof data === 'string') 
            return 
                data: function() 
                    return data;
                
            
        
        else if (typeof data === 'object') 
            var resolve = ;
            angular.forEach(data, function(value, key) 
                resolve[key] = function() 
                    return value;
                
            )
            return resolve;
        
    

]);

使用字符串时

模板:

<button ng-click="$modal.open('modalSomething', 'md', 'value'">
    Click
</button>

组件:

bindings: 
    resolve: '@'


使用对象时

模板:

<button ng-click="$modal.open('modalSomething', 'md', key1: value1, key2: value2)">
    Click
</button>

组件:

bindings: 
    resolve: '<'

【讨论】:

【参考方案4】:

我得到了下面的代码:

this.OpenModal = function() 
        var modalInstance = $uibModal.open(
            url: "/name?parameter=" + $scope.Object.ParamValue,
            templateUrl: 'views/module/page.html',
            controller: myController
        );
    

【讨论】:

你应该提供更多关于你的答案如何解决问题的信息

以上是关于AngularJS将数据传递给引导模式的主要内容,如果未能解决你的问题,请参考以下文章

如何使用引导程序将数据传递给模态

Bootstrap 4 将数据传递给远程模式

如何将数据传递给 ASP.NET MVC 中的模式视图

如何通过数组将数据传递给表格视图?

通过 Segue 将数据传递给新的 ViewController

Primeng - 对话服务将数据传递给对话组件