Question

在Web应用程序中有很多模态模板（角度基础模态）。打开模态时，我们必须给出在页面javascript文件中创建的控制器。但是这个控制器通常是内联编写的。我希望将这些控制器作为外部或动态加载。

就像：

var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', 
                                 controller: 'modal-controller.js' })

能做到吗？如果是的话，我怎么能这样做呢，

谢谢你的帮助

Answer 1

你会试试吗？

angular.module('foundationDemoApp', ['mm.foundation']);
angular.module('foundationDemoApp').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('foundationDemoApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

<!doctype html>
<html ng-app="foundationDemoApp">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    <script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.5.1.js"></script>
    <script src="example.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.css" rel="stylesheet">
  </head>
  <body>

    <div class="row">
      <div class="small-12.columns">
<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <h3>I'm a modal!</h3>
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    <p>Selected: <b>{{ selected.item }}</b></p>
    <button class="button" ng-click="ok()">OK</button>
    <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
  </script>

  <button class="button" ng-click="open()">Open me!</button>
  <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
      </div>
    </div>

Answer 2

使用oclazyload

 function nameOpen(name){    
     $ocLazyLoad.load('modal/name.ctrl.js').then(function(){
    var modalInstance = $modal.open({
      templateUrl: 'modal/name.html',
      controller: 'nameCtrl',
      controllerAs: 'vm',
      resolve: {
        phones: function () {
          return name;
        }
      }
    });
    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      //$log.info('Modal dismissed at: ' + new Date());
    });
  });
}

如何在打开模型时动态加载控制器文件

2 个答案: