HTML에서 컨트롤러로 값을 전송하려고 시도합니다.

Question

HTML에서 컨트롤러로 값을 보내려고하지만 컨트롤러로 연결되지 않습니다. 이 코드 값의 문제점은 컨트롤러 및 팩토리에서 표시가 정의되지 않은 것입니다. 이 코드는 쉽게 이해 바랍니다 :

var mymodal = angular.module('mymodal', []); 
mymodal.controller('MainCtrl', function($scope, loginfactory) { 
    $scope.showModal = false; 
    $scope.toggleModal = function() { 
     $scope.showModal = !$scope.showModal; 
    }; 
    $scope.doLogin = function() { 
     var promise = loginfactory.logincheck($scope.userid, $scope.pwd); 
    } 
}); 
mymodal.factory("loginfactory", function($http, $q) { 
    return { 
     "logincheck": function(userid, pwd) { 
      console.log(userid); 
      console.log(pwd); 
      return Object; 
     } 
    }; 
}); 
mymodal.directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
      '<div class="modal-header">' + 
      '<button type="button" class="close" data-dismiss="modal" aria-hidden="">×</button>' + 
      '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body" ng-transclude=""></div>' + 
      '</div>' + 
      '</div>' + 
      '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: true, 
     link: function postLink(scope, element, attrs) { 
      scope.title = attrs.title; 
      scope.$watch(attrs.visible, function(value) { 
       if (value == true) 
        $(element).modal('show'); 
       else 
        $(element).modal('hide'); 
      }); 
      $(element).on('shown.bs.modal', function() { 
       scope.$apply(function() { 
        scope.$parent[attrs.visible] = true; 
       }); 
      }); 
      $(element).on('hidden.bs.modal', function() { 
       scope.$apply(function() { 
        scope.$parent[attrs.visible] = false; 
       }); 
      }); 
     } 
    }; 
}); 

내보기 :

여기

<div ng-controller="MainCtrl" class="container"> 
    <h1>Modal example</h1> 
    <button ng-click="toggleModal()" class="btn btn-default">Open modal</button> 
    <modal title="Login form" visible="showModal"> 
     <form role="form"> 
      <div class="form-group"> 
       <label for="email">Email address</label> 
       <input type="text" class="form-control" ng-model="userid" placeholder="Enter email" /> 
      </div> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" class="form-control" ng-model="pwd" placeholder="Password" /> 
      </div> 
      <button type="submit" ng-click="doLogin()" class="btn btn-default">Submit</button> 
     </form> 
    </modal> 
</div> 

Answer 1

내가 see Plunker을 의미하는 것입니다;
귀하의 지시어에 사용 된 : scope: true,이 지시어의 변경 내용은 부모 범위 Look at this에 반영되지 않으므로이 작업을 수행하는 데 필요합니다. 에서 것은 btton 제출 : 당신의 CONTROLER에

<button ng-click="doLogin(userid,pwd)" class="btn btn-default">submit</button> 

을 (각도 가장 좋은 방법은 뷰에서 범위를 통과) : 당신은 내가에서 $ scope.userid 및 $ scope.pwd를 통과하지 못한 참조

$scope.doLogin = function(userid,pwd) { 
    var promise = loginfactory.logincheck(userid, pwd); 
} 

당신의 loginfactory하지만보기의 값을 scope: true,으로 전달하면 코드가 작동하지 않습니다.

마지막으로 제안했듯이 jquery 부트 스트랩과 혼합 할 필요가 없으므로 UI ​​부트 스트랩을 각도로 사용할 수 있습니다. UI Bootstrap