将视图重用为模态和非模态 (angularjs + bootstrap-ui)

Question

我目前使用 views/foo.html 作为普通视图。

说这个视图有这个：

  <p>Hello</p>

现在我想重用 views/foo.html 作为模式的内容，但我想用这个包装它：

<div class="modal-header">
    <h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
     <!-- I want to include views/foo.html in here -->
</div>

所以模态看起来像这样：

<div class="modal-header">
    <h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
     <p>Hello</p>
</div>

模态调用程序如下：（注意注释）

$scope.openFooModal = function () {

    var modalScope = $scope.$new();

    var modalInstance = $uibModal.open({
        templateUrl: 'views/foo.html', /* HERE I NEED TO WRAP IT */
        controller: 'fooController',
        scope: modalScope,
        size: 'lg'
    });

    modalInstance.result.then(function (result) {
    }, null);
};

最佳解决方案是什么？
我应该创建一个 foo2.html 吗？

Answer 1

所以最后 JB Nizet 的评论作为一个开始起作用了，但是有这个问题：

这是我最后做的：

负责打开模式或将其显示为 ng-view 的视图：

  <body ng-controller="indexController">
    <ul>
      <li>
        <a href="" ng-click="openModal()">Open as modal</a>
      </li>
      <li>
        <a href="#nonmodal">Open as non modal</a>
      </li>
    </ul>
    <div ng-view=""></div> <!-- Used by routeProvider -->
  </body>

...它的控制器

angular.module('myApp').controller('indexController', ['$scope','$uibModal', function($scope,$uibModal) {

    $scope.openModal = function () {

        var modalScope = $scope.$new();

        var modalInstance = $uibModal.open({
            templateUrl: 'foo-as-modal.html',
            controller: 'fooController',
            scope: modalScope
        });

        modalScope.modalInstance = modalInstance;
             // ^ I'm giving the modal his own reference
             //   using the scope. Injecting wont work on
             //   the non-modal case!

        modalInstance.result.then(function (result) {
        }, null);
    };
}]);

要作为模态或非模态重新使用的视图：

<p>Hello {{name}}</p>

其控制者：

angular.module('myApp').controller('fooController', ['$scope', function($scope) { 
                                                     // ^ 
                                                     // I'm not injecting
                                                     // uibModalInstance
                                                     // (this is important)


    $scope.name = "John";

    $scope.cancel = function () {
        $scope.modalInstance.dismiss('cancel');
          // ^ I can access the modalInstance by the $scope
    };
}]);

视图用作模态（包装器）

<div class="modal-header">
    <h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
    <ng-include src="'foo.html'"></ng-include> <!-- Credits to JB's comment -->
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

路由提供者

$routeProvider
    .when('/nonmodal', {
        templateUrl: 'foo.html',
        controller: 'fooController'
    })

这是一个 plunkr：https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5?p=info

将视图重用为模态和非模态 (angularjs + bootstrap-ui)

Reuse a view as a modal and non-modal (angularjs + bootstrap-ui)

angularjs

angular-ui-bootstrap