通过引导模态内部角控制器

[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>

问题：模态被从JQuery的使用调用.modal（'show'）方法。我的意图是在模态打开时呈现控制器。但是，看起来该模式不能识别控制器，并且不能执行来自控制器的消息或功能。感谢您对此事的帮助。 TQ。

来源

2016-06-10 Mzach

您应该使用[界面的自举（https://angular-ui.github.io/bootstrap/），而不是常规的jQuery引导 –

HI请检查例子

的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/

来源

2016-06-10 08:28:42

嗨。谢谢你的样品。我相信这显然会起作用，因为在重新排序期间，所有内容都在同一个html页面中。在我的情况下，我故意将update.html放在单独的html文件中。我猜它不会在主HTML页面被调用时呈现。原因是update.html是一个相当庞大的形式，并且首选不包含在主html文件中。所以，模式基本上是调用远程html文件。 – Mzach

原因是update.html相当一个巨大的形式和首选号码t到包含在主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..}; 

}

模态被从JQuery的使用.modal（ '节目'）方法调用。

所以，如果你使用一个按钮来做到这一点渲染模式，你可以很容易地包括指令为模态，而不是NG-点击（）

最后一个属性，包括在样式文件您的模板文件

<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>

来源

2016-06-10 10:28:18

通过引导模态内部角控制器

回答

相关问题