부트 스트랩 모달 내부 각도 컨트롤러를 사용

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

[스크립트]

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

당신은 [UI - 부트 스트랩 (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

안녕을 사용해야합니다. 샘플 주셔서 감사합니다. 나는 모든 것이 redering 동안 같은 html 페이지 안에 있기 때문에 이것은 분명히 작동 할 것이라고 나는 믿는다. 제 경우에는 의도적으로 update.html을 별도의 html 파일에 넣습니다. 메인 HTML 페이지가 호출 될 때 렌더링되지 않을 것입니다. 그 이유는 update.html은 매우 방대한 양식이며 내부의 주요 html 파일을 포함하지 않기를 선호하기 때문입니다. 따라서 모달은 기본적으로 원격 HTML 파일을 호출합니다. – Mzach

이유는 update.html 상당히이다 거대한 형태와 선호하는 아니오 t에서 은 내부 메인 html 파일을 포함합니다. 따라서 모달은 기본적으로 원격 HTML 파일을 호출합니다.

원격 HTML 파일과 모달 파일은 두 개의 다른 UpdateProjectController 인스턴스를 사용하고있을 수 있습니다.

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

부트 스트랩 모달 내부 각도 컨트롤러를 사용

답변

관련 문제