Angular-ui：解决方法是将范围传递给angular-ui模态的唯一方法吗？

Question

I have been using angular-ui with angularjs for a while now and have encountered a problem and subsequently a solution, but I want to know if this is a good way to do things. 我已经将angular-ui和angularjs一起使用了一段时间，遇到了一个问题，随后又遇到了一个解决方案，但是我想知道这是否是做事的好方法。 The original issue was dealing with passing objects in a directive's scope to a modal. 最初的问题是处理将指令范围内的对象传递给模式。 Most of the suggestions I found on SO and such deal with resolve: 我在SO上找到的大多数建议都可以解决：

resolve: members that will be resolved and passed to the controller as locals: AngularJS - Pass object data into modal resolve：将被解析并作为本地变量传递给控制器的成员： AngularJS-将对象数据传递给模态

My issue with the suggestions was that if you need to pass different objects from the scope to the modal for different modals, you will need two controllers per modal. 我的建议问题是，如果您需要将范围不同的对象从范围传递到模态以用于不同的模态，则每个模态将需要两个控制器。 One with the open() method/$modal service and the other for the actual $modalinstance. 一个使用open（）方法/ $ modal服务，另一个用于实际的$ modalinstance。 This is due to the necessity of resolving different objects in different ways for different modals. 这是由于有必要针对不同的模态以不同的方式解析不同的对象。 I decided that instead of using multiple resolves, why not use one that is an object that can be defined in the html to hold all of the other objects in the directive's scope that you wish to pass to the modal? 我决定不使用多个解析，而不是使用可以在html中定义的对象来保存要传递给模式的指令范围内的所有其他对象？

The code is below - everything should look fairly vanilla until the test.html directive template. 代码在下面-在test.html指令模板之前，所有内容看起来都非常原始。

app.js: app.js：

var app = angular.module('modalscope', ['ui.bootstrap']);

app.controller('ModalCtrl', function($scope, $modal){

    $scope.open = function(modal_scope){
        var modalInstance = $modal.open({
            scope: $scope,
            templateUrl: 'modal-content.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                modal_scope: function() {
                        $scope.modal_scope = modal_scope;
                        return $scope.modal_scope;
                }
            }
        });
    };
});

app.controller('ModalInstanceCtrl', function($scope, $modalInstance, modal_scope){
    $scope.names = modal_scope.names;
    $scope.selName = modal_scope.selName;
    $scope.ok = function(){
        $modalInstance.close({  });
    };
});

app.directive("appList", function() {
  return {
    restrict: 'E',
    templateUrl: "test.html",
    'link': function(scope, iElement, iAttrs) {
            scope.names = [ {"name":"john"},{"name":"joe"},{"name":"mary"}];
    }
  };
});

index.hmtl: index.hmtl：

<html ng-app="modalscope">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>


</head>
<body>
    <app-list></app-list>
</body>
</html>

test.html: test.html：

<div ng-controller="ModalCtrl">
    <h2 ng-repeat="name in names">{{name.name}}<button ng-click="open({'names':names,'selName':name });">Click</button></h2>
</div>

modal_content.html: modal_content.html：

<h2>modal test</h2>
<p>name: {{selName.name}}</p>
<button class="btn btn-success" ng-click="ok()">OK</button>

Basically, is my current implementation going to cause issues? 基本上，我目前的实施方式会引起问题吗？ Are there better ways to avoid writing multiple controllers per modal/resolving a long list of potential scope objects than resolving a single container object for the modal instance's scope as I did with: 是否有更好的方法来避免为每个模态编写多个控制器/解决一长串潜在作用域对象，而不是像我对模态实例的作用域解决单个容器对象那样：

"open({'names':names,'selName':name });"

Answer 1

I know this is an old question but I landed here from Google so others might. 我知道这是一个老问题，但我是从Google登陆到这里的，所以其他人也可以。 Here's how I would transfer a large number of values into a modal without using resolve: 这是在不使用resolve的情况下将大量值转换为模式的方法：

app.controller('ModalCtrl', function($scope, $uibModal, $rootScope) {

    $scope.open = function(options) {
        // Make a brand new scope for the modal. Alternatively you could use
        // $scope.$new() to get a new scope which inherits from the controller's
        // scope.
        var modal_scope = $rootScope.$new();

        // Copy data from the options into the new scope (depending on what's in
        // options you may want to use a clone of options to get a completely
        // separate copy, or angular.merge).
        angular.extend(modal_scope, options);

        return $uibModal.open({
            // Use the new scope as the modal's scope
            scope: modal_scope,
            templateUrl: 'modal-content.html',
            controller: 'ModalInstanceCtrl',
            // No need for any resolves
        });
    };
});

Angular-ui：解决方法是将范围传递给angular-ui模态的唯一方法吗？

问题描述

1 个解决方案

解决方案1
-1 2016-06-08 08:07:28

Angular-ui：解决方法是将范围传递给angular-ui模态的唯一方法吗？

问题描述

1 个解决方案

解决方案1 -1 2016-06-08 08:07:28

解决方案1
-1 2016-06-08 08:07:28