Контроллер Laravel + AngularJS существует, но возвращает ошибку не функции

Im только для AngularJS и хотел бы интегрировать его с помощью Laravel (5.2) Я смог успешно загрузить Laravel и Angular таким образом.Контроллер Laravel + AngularJS существует, но возвращает ошибку не функции

HTML файла: ../resources/views/master.php

<!DOCTYPE html> 
<html> 
<head> 
    <title>...</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script type="text/javascript" src="assets/js/phone-app/app.module.js"></script> 
</head> 
<body> 
    <div class="container" ng-app="todoApp"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2>Todo</h2> 
       <div ng-controller="TodoListController as todoList"> 
        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
        [ <a href="" ng-click="todoList.archive()">archive</a> ] 
        <ul class="unstyled"> 
         <li ng-repeat="todo in todoList.todos"> 
          <label class="checkbox"> 
           <input type="checkbox" ng-model="todo.done"> 
           <span class="done-{{todo.done}}">{{todo.text}}</span> 
          </label> 
         </li> 
        </ul> 
        <form ng-submit="todoList.addTodo()"> 
         <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"> 
         <input class="btn-primary" type="submit" value="add"> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

AngularJS Файл: ../public/assets/js/phone-app/app.module.js

(function() { 
    'use strict'; 
    angular.module('todoApp', []) 
     .controller('TodoListController', function() { 
     var todoList = this; 
     todoList.todos = [ 
      {text:'learn angular', done:true}, 
      {text:'build an angular app', done:false}]; 

     todoList.addTodo = function() { 
      todoList.todos.push({text:todoList.todoText, done:false}); 
      todoList.todoText = ''; 
     }; 

     todoList.remaining = function() { 
      var count = 0; 
      angular.forEach(todoList.todos, function(todo) { 
      count += todo.done ? 0 : 1; 
      }); 
      return count; 
     }; 

     todoList.archive = function() { 
      var oldTodos = todoList.todos; 
      todoList.todos = []; 
      angular.forEach(oldTodos, function(todo) { 
      if (!todo.done) todoList.todos.push(todo); 
      }); 
     }; 
    }); 
})();

Но когда я создал отдельный HTML, который будет учитывать угловые шаблоны, это когда я получаю ошибку Argument 'TodoListController' is not a function, got undefined

Предлагаемые конструкции:

HTML файла: ../resources/views/master.php

<!DOCTYPE html> 
<html> 
<head> 
    <title>...</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script type="text/javascript" src="assets/js/phone-app/app.module.js"></script> 
</head> 
<body> 
    <div class="container" ng-app="todoApp"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <todo-app></todo-app> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

AngularJS Файл: ../public/assets/js/phone-app/app.module.js

(function() { 
    'use strict'; 
    angular.module('todoApp', []); 

    angular.module('todoApp') 
     .component('todoApp', { 
      templateUrl: 'assets/js/phone-app/templates/todo.html', 
      controller: function TodoListController() { 
       var todoList = this; 
       todoList.todos = [ 
        {text:'learn angular', done:true}, 
        {text:'build an angular app', done:false}]; 

       todoList.addTodo = function() { 
        todoList.todos.push({text:todoList.todoText, done:false}); 
        todoList.todoText = ''; 
       }; 

       todoList.remaining = function() { 
        var count = 0; 
        angular.forEach(todoList.todos, function(todo) { 
         count += todo.done ? 0 : 1; 
        }); 
        return count; 
       }; 

       todoList.archive = function() { 
        var oldTodos = todoList.todos; 
        todoList.todos = []; 
        angular.forEach(oldTodos, function(todo) { 
         if (!todo.done) todoList.todos.push(todo); 
        }); 
       }; 
      } 
     } 
    ); 
})();

Файл шаблона: ../public/assets/js/phone-app/templates/todo.html

<h2>Todo</h2> 
<div ng-controller="TodoListController as todoList"> 
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
    [ <a href="" ng-click="todoList.archive()">archive</a> ] 
    <ul class="unstyled"> 
     <li ng-repeat="todo in todoList.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
     </li> 
    </ul> 
    <form ng-submit="todoList.addTodo()"> 
     <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"> 
     <input class="btn btn-primary" type="submit" value="add"> 
    </form> 
</div>

Если вы заметите, я переместил содержимое на отдельный файл шаблона , Это загружает страницу с шаблоном, но возвращает ошибку на консоли и просто отображает страницу как есть.

источник

2016-06-02 basagabi

-1

Попробуйте заменить

.component

.directive

Может компоненты есть ошибка

источник

2016-06-02 22:42:16 shall

Я не работаю :(Я смог найти решение своего ответа, но мне нужно было четкое объяснение того, как оно работает, поскольку я просто скопировал его на других сайтах. – basagabi

я смог получить эту работу, но как-то не знаю, как это работает. @ _ @ В любом случае, я просто попытался найти примеры на сайте AngularJS и попытался «скопировать» их. При этом я пришел с этим решением.

В файле с шаблона я удалил ng-controller и обменил все поля todoList на $ctrl.

<h2>Todo</h2> 
<div> 
    <span>{{$ctrl.remaining()}} of {{$ctrl.todos.length}} remaining</span> 
    [ <a href="" ng-click="$ctrl.archive()">archive</a> ] 
    <ul class="unstyled"> 
     <li ng-repeat="todo in $ctrl.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
     </li> 
    </ul> 
    <form ng-submit="$ctrl.addTodo()"> 
     <input type="text" ng-model="$ctrl.todoText" size="30" placeholder="add new todo here"> 
     <input class="btn btn-primary" type="submit" value="add"> 
    </form> 
</div>

Будет ли кто-нибудь, пожалуйста, объясните мне, как же $ctrl работал здесь и почему нг-контроллер не нужен в такой структуре по сравнению с первой я уже говорил выше?

источник

2016-06-02 22:48:52 basagabi

Контроллер Laravel + AngularJS существует, но возвращает ошибку не функции

ответ

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