Question

[HTML]

<div class="modal fade" id="proj-edit" tabindex="-1" role="dialog" aria-hidden="true" data-remote="update.html">
  <div class="modal-dialog">
    <div class="modal-content" ng-controller="UpdateProjectController"></div>
  </div>
</div>

[JavaScript的]

var ProjectApp = angular.module('ProjectApp', ["ui.bootstrap"]);
ProjectApp.controller('UpdateProjectController', ["$scope","$http",  function($scope, $http){
  $scope.message = 'Please enter valid case number';
  $scope.UpdateProject = function(){..do something..};
}]);

[update.html]

<div class="modal-header" >
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  <h4 id="myModalLabel" class="modal-title">Update Project</h4>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="submit" class="btn blue-soft" ng-click="UpdateProject()">Update</button>
  <button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>

问题：使用 .modal（＆＃39; show＆＃39;）方法从JQuery调用Modal。我的目的是在模态打开时渲染控制器。但是，似乎模态不识别控制器，并且不能执行控制器的消息和功能。感谢你对此事的帮助。 TQ

Answer 1

嗨，请查看示例

的index.html

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>User name</label>
            <input type="text" ng-model="user.user" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
            <label>Add some notes</label>
            <textarea rows="4" cols="50" ng-model="user.notes">

</textarea>
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

example.js

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.user = {
        user: 'name',
        password: null,
        notes: null
    };

    $scope.open = function () {

        $modal.open({
            templateUrl: 'myModalContent.html', // loads the template
            backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
            windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.'); // kinda console logs this statement
                    $log.log(user); 
                    $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel'); 
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });//end of modal.open
    }; // end of scope.open function
};

供参考http://embed.plnkr.co/As959V/

Answer 2

原因是update.html是一个非常庞大的形式，并且不愿意包含在主html文件中。所以，模态基本上是调用远程html文件。

您的远程html文件和模态文件可能使用了UpdateProjectController的2个不同实例。

正如Martijn所说，你可以使用ui-bootstrap但是如果你不想这样做，你可以通过使用指令来解决它。

// directive to open the modal
var app = angular.module('myApp', []);
app.directive('myModal', myModal);

myModal.$inject = [];

function myModal() {

        return {
            restrict: 'A',
            link: link
        }

        function link($scope, $element, $attributes) {
            $element.click(function (event) {
                angular.element($attributes.modalId).modal();
            });
        }
}

app.controller('ModalCtrl', ModalCtrl);

ModalCtrl.$inject = [];

function ModalCtrl() {
    $scope.message = 'Please enter valid case number';
    $scope.UpdateProject = function(){..do something..};

}

使用.modal（'show'）方法从JQuery调用模态。

因此，如果您使用按钮来渲染模态，您可以轻松地将该指令作为模态的属性而不是ng-click（）

最后，在模板文件中包含模态文件

 <body>
         <div ng-controller="UpdateProjectController">
             // So in case you use a button to do this render the modal,
             // you could easily include the directive as an attribute to the modal instead of ng-click()
             <a href="javascript:;" my-modal modal-id="#modalUpdateProject">
                 Update Project
             </a>
         </div>

         <!-- modals -->
         <div ng-controller="ModalCtrl">
             <ng-include src="'path/to/modal.html'"></ng-include>
         </div>
         <!-- end modals -->
     </body>

在Bootstrap Modal中使用Angular控制器

2 个答案: