如何在模型打開時動態地加載控制器文件

在web應用程序中有很多模態模板（角基礎模態）。當模式打開時，我們必須給頁面JavaScript文件中創建的控制器。但是這個控制器通常是內聯編寫的。我想要將這些控制器作爲外部或動態加載。如何在模型打開時動態地加載控制器文件

它是這樣的：

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

能不能做到？如果是這樣，我該怎麼辦，這，

感謝您的幫助

來源

2015-03-13 yunus kula

你會嘗試嗎？

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>

來源

2015-03-13 15:01:41

我已經知道這一點，但我probem是如何控制從外部的js文件加載像模板 – 2015-03-13 15:05:00

這樣的事情？ VAR modalInstance = $ modal.open（{ templateUrl： 'myModalContent.html'，控制器： '模式，controller.js' }） – 2015-03-13 15:20:42

是的，我想這樣的 – 2015-03-13 17:43:22

使用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()); 
    }); 
    }); 
}

來源

2016-09-21 10:00:44

如何在模型打開時動態地加載控制器文件

回答

相關問題