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的评论作为一个开始，但是有这个问题： Inject $uibModalInstance to a controllar not initiated by a $uibModal

这就是我最后所做的：

负责打开模态或将其显示为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

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

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

将视图重用为模态和非模态（angularjs + bootstrap-ui）

1 个答案: