Question

我正在从我的主HTML文件中调用bootstrap模式HTML文件，这是我正在做的示例代码。 Link

<div class="container" ng-controller="MainAngularControler"> <!--The main div with the controller in it-->

正如它所示，任何人都可以建议一种方法来调用另一个Angular控制器用于bootstrap模态。因为要求加载模态的按钮位于已经有角度控制器的div中，这不会让模态加载另一个不同的角度控制器。所有这些背后的想法是让我的代码更容易理解。

Answer 1

在角度控制器中创建模态实例时，需要像这样传递模态控制器。

var modalInstance = $uibModal.open({
    ariaLabelledBy: 'modal-title',
    ariaDescribedBy: 'modal-body',
    templateUrl: 'myModalContent.html',
    size: "lg",
    controller: 'modalController'
  });

请查看此plunker或以下代码。

var app = angular.module('plunker', ["ui.bootstrap"]);

app.controller('MainCtrl', function($scope, $uibModal) {
  $scope.name = 'World';
    
    $scope.OpenModal = function(){
      var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'myModalContent.html',
        size: "lg",
        controller: 'modalController'
      });
  
      modalInstance.result.then(function (selectedItem) {
        //$ctrl.selected = selectedItem;
      }, function () {
        //$log.info('Modal dismissed at: ' + new Date());
      });
    };
});

app.controller('modalController', function($scope){
  $scope.text = 'I am from modal controller SCOPE';
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body" id="modal-body">
            THIS IS A MODAL. {{text}}
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>
    <a ng-click="OpenModal()">Open Modal</a>
  </body>

</html>

使用不同的角度控制器进行自举模态

1 个答案: