라이브러리의 최신 버전을 사용할 때 UI.bootstrap.modal이 열리지 않습니다.

Question

최신 누젠트 라이브러리가있는 ASP.NET MVC 5 Visual Studio 2013에서이 작업을 수행하려고합니다. AngularJS와 코어 1.3.8 AngularJS와 UI 부트 스트랩 0.12.0 부트 스트랩 3.3.1 jQuery를 2.1.3

중요 파일 : App.js

var deviceModule = angular.module("devicesModule", ["ui.bootstrap"]); 
var app = angular.module("dxuWebApp", ["devicesModule"]); 

DeviceController.js

deviceModule.controller("DevicesController", function ($scope, deviceService, $modal) { 
    $scope.devices = []; 

    function init() { 
     $scope.devices = deviceService.getDevices(); 
    } 

    init(); 

    $scope.addDevice = function(size) { 
     var modalInstance = $modal.open({ 
      templateUrl: "newDeviceTemplate.html", 
      controller: "NewDeviceModelController", 
      size: size 
     }); 

     modalInstance.opened.then(function() { 
      alert('yep'); 
     }); 
     modalInstance.result.then(function (newDevice) { 
      deviceService.postDevice(newDevice); 
     }, function() { 

     }); 

    } 
}); 

deviceModule.controller("NewDeviceModelController", function ($scope, $modalInstance) { 
    $scope.ok = function() { 
     $modalInstance.close({ name: newDevice.name }); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss("cancel"); 
    }; 

}); 

newDeviceTemplate.html

<div class="modal-header"> 
    <h2>New Device</h2> 
</div> 
<div class="modal-body"> 
    <input type="text" data-ng-model="newDevice.name" /> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Index.cshtml

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div data-ng-app="dxuWebApp" data-ng-controller="DevicesController"> 


    <div class="row"> 
     <div class="col-lg-12"> 
      <h2>Devices <a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign"></span></a></h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <ul class="list-inline"> 
       <li data-ng-repeat="device in devices | orderBy: 'name'"> 
        <a href="#"> 
         <div class="device"> 
          <div class="deviceImage"> 
           @*<img alt="device image"/>*@ 
           <span class="glyphicon glyphicon-phone"></span> 

          </div> 
          <div class="deviceName"> 
           {{device.name | uppercase}} 
          </div> 
         </div> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

@section scripts 
{ 
    @Scripts.Render("~/bundles/dxuWebApp") 
    <script type="text/ng-template" id="newDevice.html">   
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h2>New Device</h2> 
       </div> 
       <div class="modal-body"> 
        <input type="text" data-ng-model="newDevice.name" /> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary" ng-click="ok()">OK</button> 
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
       </div> 
      </div> 
     </div> 
    </script> 
} 

모두 UI - 부트 스트랩 및 UI-bootstrap.tpls에 대한 참조는 _layout 페이지에 있습니다. 그와 같은 오류 또는 아무것도

은 내가

<a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign"> 

AngularJS와를 클릭하면 마법이 일어날 것이라고 기대하지 않았다 나는 화면에 모달을 얻을 것입니다, 그러나 아무 일도 발생하지 않습니다. deviceController.addDevice()에 중단 점을 넣었습니다. 그 지점에 도달하여 통과하지만 아무 것도 화면에 표시되지 않습니다.

내 코드가 잘못 되었습니까?

Answer 1

나는 똑같은 문제가있었습니다.

AngularJS에서 MVC 5.0을 사용하고 있으므로 modal.html을 찾을 수없는 404를 얻게되었습니다. 모달에 대한 컨트롤러에서 경로를 만들지 않았기 때문입니다. html 또는 라우트와 같은 이름을 가진 뷰를 컨트롤러에 맵핑하십시오.

컨트롤러와보기를 올바르게 설정 한 후에 작동했습니다.

죄송합니다. MVC 프로세스 다음의 문제 일 뿐이므로 코드가 없습니다.