앵귤러 코드가 부트 스트랩 모달에서 작동하지 않습니다.

Question

나는 angularJs를 사용하고 있으며, asp.net mvc4로 트위터 부트 스트랩을 사용하고 있습니다. 나는 앵글 스트랩을 사용하지 않았습니다. 부트 스트랩 모달에서 부분 뷰를로드하려고합니다. 부분보기에는 각도 코드가 포함됩니다.

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
</div> 

<div ng-app=""> 
    <label>Sample: <input type="text" ng-model="sample" /></label> 
    <br /> 
    <label>Show Value: {{sample}}</label> 
</div> 

<div class="ContainerRowButton"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
</div> 

: 여기 내 코드는 '징발'컨트롤러 '만들기'조치를

@model IEnumerable<IMS.Domain.Model.GetAllRequisitions_Result> 

@{ 
    ViewBag.Title = "Requisition List"; 
    Layout = "~/Views/Shared/MasterPage.cshtml"; 
} 

<a href="#myModal" role="button" class="btn btn-primary" id="modalluncher" data-toggle="modal" onclick="loadCreateForm()"> Launch demo modal </a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

    <div class="modal-body"> 
    </div> 

</div> 

<script type="text/javascript"> 
    function loadCreateForm() { 
     var content = '@Url.Action("Create", "Requisition", new { area = "IMS" })'; 
     $('div.modal-body').load(content); 
} 
</script> 

입니다 : 여기

내가 부트 스트랩 모달를 호출하고 내 코드입니다 {{sample}}에 의해 데이터를 표시하려고 시도 할 때 ng-model = "sample"의 경우 {{sample}}을 유지합니다. 그것은 내 '창조'행동이 angularJ를 얻지 못하는 것과 같습니다.

'MasterPage.cshtml'에 필요한 모든 스크립트를 렌더링했습니다.

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/others") 

을 그리고 여기 내 'Bundle.config.cs'파일의 코드입니다 : 내 MasterPage.cshtml이 포함

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.js")); 

bundles.Add(new ScriptBundle("~/bundles/others").Include(
        "~/Content/bootstrap/js/bootstrap.js", 
        "~/Scripts/jquery.dataTables.js", 
        "~/Scripts/dataTables_bootstrap.js", 
        "~/Scripts/bootstrap-dropdown.js", 
        "~/Scripts/jquery.dataTables.columnFilter.js", 
        "~/Scripts/Custom/CustomScript.js", 
        "~/Scripts/jquery.validationEngine-en.js", 
        "~/Scripts/jquery.validationEngine.js", 
        "~/Scripts/angular.js" 
        )); 

내가 뭐하는 거지 무슨 문제

? 도움이 필요합니다 ...

Answer 1

@Muctadir가 말한 것에 덧붙여, 각도 요소에 모달 부분을 검사하려면 각도를 말해야합니다. DOM에 partial을 주입하기 전에 $compile을 호출하여 그렇게 할 수 있습니다. 문제는 $compile 서비스에 액세스 할 수 있어야하고 사용자가 loadCreateForm() 내부에서 수행 할 수 없다는 것입니다. 각도 모듈에서만 가능합니다. 따라서 필요한 것을 얻을 수있는 방식으로 코드를 구성해야합니다.

이 모달과 그 내용을 처리하는 지침을 만들기 : 여기 내 제안이다

하지만 내용이로드 된 후에 만, 내용을로드 한 후 현재 범위를 사용하여 내용을 컴파일

.directive('myModal', function($compile){ 
    return { 
     replace:false, 
     link: function(scope, element, attrs){ 
      var content = '@Url.Action("Create", "Requisition", new { area = "IMS" })'; 
      elem.load(content, null, function(){ 
       $compile(elem.contents())(scope); 
      }); 
     } 
    }; 
}); 

서버. 희망이 도움이됩니다.