2016-08-09 17 views
3

Как включить ui.bootstrap. Я использую ui.bootstrap, чтобы открыть bootstrap modal (открыть) на ng-click. После этого я хочу отправить все модальные данные на сервер, для этого я использую $http в моем угловом контроллере. Но это дает ошибку. Ниже мой угловой код js.включают ui бутстрап в угловых js

var app = angular.module("modalFormApp", ['ui.bootstrap']); 

app.controller("modalAccountFormController", ['$scope', '$modal', '$log', '$http' 

    function($scope, $modal, $log, $http) { 

     $scope.showForm = function() { 
      $scope.message = "Show Form Button Clicked"; 
      console.log($scope.message); 

      var modalInstance = $modal.open({ 
       templateUrl: 'modal-form.html', 
       controller: ModalInstanceCtrl, 
       scope: $scope, 
       resolve: { 
        userForm: function() { 
         return $scope.userForm; 
        } 
       } 
      }); 

      modalInstance.result.then(function(selectedItem) { 
       $scope.selected = selectedItem; 
      }, function() { 
       $log.info('Modal dismissed at: ' + new Date()); 
      }); 
     }; 
    } 
]); 


app.controller('ModalInstanceCtrl', ['$scope', '$http', '$modalInstance', userForm, function($scope, $http, $modalInstance, userForm) { 

    //var ModalInstanceCtrl = function ($scope, $modalInstance,$http,      userForm) { 
    $scope.form = {} 
    $scope.url = 'submit.php'; 
    $scope.submitForm = function() { 
     if ($scope.form.userForm.$valid) { 
      $http.post($scope.url, { 
       "name": $scope.name, 
       "email": 

        $scope.email, 
       "message": $scope.message 
      }). 
      success(function(data, status) { 
       console.log(data); 
       $scope.status = status; 
       $scope.data = data; 
       $scope.result = data; 
      }) 

     } else { 
      console.log('userform is not in scope'); 
     } 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]) 
+0

Какую ошибку показали? –

+0

@SatheeshSanthosh я получил ошибку ниже ..... [$ injector: modulerr] Не удалось создать модуль modalFormApp из-за: [$ injector: nomod] Модуль modalFormApp недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента. – rock

ответ

0

'ui.bootstrap' предварительные условия 'ngAnimate' и 'ngTouch'. Вы должны добавить их в модуль

var app = angular.module("modalFormApp", ['ngAnimate','ngTouch','ui.bootstrap']); 

И вы должны добавить свои скрипты на ваш взгляд

script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js") 
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.min.js") 
Смежные вопросы