2014-09-07 3 views
0

Я получаю свой первый вкус от AngularJS, создавая довольно много с laravel в качестве backend. Поэтому я установил laravel и создал файл index.blade.php. В нем у меня есть ng-submit, но я не могу заставить его работать.Функция отправки AngularJS не работает

<!doctype html> 

<html lang="en" ng-app> 

    <head> 

     <meta charset="UTF-8"> 
     <title>Laravel and AngularJS test</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
     <script src="/js/main.js"></script> 

    </head> 

    <body> 

     <div ng-controller="TodoController"> 

      <h1>Todo</h1> 

      <input type="text" placeholder="Search todos" ng-model="search"> 

      <ul> 

       <li ng-repeat="to in todos | filter:search"> 

        @{{ todo.body }} 

       </li> 

      </ul> 

      <form ng-submit="addTodo()"> 

       <input type="text" placeholder="Add a todo" ng-model="newTodo"> 
       <button type="submit">Add todo</button> 

      </form> 

     </div> 

    </body> 

</html> 

main.js

function TodoController($scope) { 

    $scope.todos = [ 

     { body: 'Groceries' }, 
     { body: 'Drive' } 

    ]; 

    $scope.addTodo = function() { 

     $window.alert('test'); 


    }; 

} 
+0

есть какая-либо ошибка консоли? –

+0

Нет, было бы намного легче, если бы они были. – User183849481

ответ

0

Есть fiddle

angular.module('todoApp', []) 
.controller('TodoController', ['$scope', '$window', function ($scope, $window) { 

    $scope.todos = [ 

     { body: 'Groceries' }, 
     { body: 'Drive' } 

    ]; 

    $scope.addTodo = function() { 

     $window.alert('test'); 


    }; 

}]); 

С HTML, как:

<div ng-app="todoApp">  
    <div ng-controller="TodoController"> 

     <h1>Todo</h1> 

     <input type="text" placeholder="Search todos" ng-model="search"> 

     <ul> 

      <li ng-repeat="to in todos | filter:search"> 

       @{{ to.body }} 
      </li> 

     </ul> 

     <form ng-submit="addTodo()"> 

      <input type="text" placeholder="Add a todo" ng-model="newTodo"/> 
      <button type="submit">Add todo</button> 

     </form> 

    </div> 
</div> 
+0

Я копирую/вставляю ваши вещи, но затем я получаю' Uncaught Error: [$ injector: modulerr] ' – User183849481

+0

' Не удалось создать экземпляр модуля todoApp из-за: Ошибка: [$ инжектор: nomod] http: //errors.angularjs.org/1.2.5/$injector/nomod? p0 = todoApp' – User183849481

+0

Ну, ошибки идут вперед! Глупые вопросы, которые я знаю, но ваш файл main.js определенно загружен правильно? У вас есть только одно объявление ng-app в вашем HTML? Хорошо, если он находится в теге html, а не в div, но убедитесь, что он ng-app = «todoApp», ve скопировал строку js для строки. – Ross

0
function TodoController($scope,$window) { ..... 

попытка изменить этот путь :)

+0

Не работает :( – User183849481

+0

Этот список работает? –

+0

Да, это странная часть. И предупреждение предназначено только для тестирования, я хочу добавить текст ввода в список. – User183849481

0

контроллер должен определить, как следующее main.js

angular.module('todoApp', []) .controller('TodoController', ['$scope', function($scope) { 

}]); 

Имени Отдать нг-приложение нг-приложение = 'todoApp' в теге HTML

Смежные вопросы