Laravel + AngularJS控制器已存在，但返回的错误不是函数
[英]Laravel + AngularJS controller is existing but returns an error of not a function
问题描述
Im just new to AngularJS and would like to integrate it using Laravel (5.2) I was able to successfully load Laravel and Angular in this manner. 
我刚刚对AngularJS感兴趣，并且想使用Laravel（5.2）集成它，因此我能够以这种方式成功加载Laravel和Angular。
HTML File: ../resources/views/master.php 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 File: ../public/assets/js/phone-app/app.module.js 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);
});
};
});
})();
But when I created a separate html that will accommodate angular templates, this is when I get an error of Argument 'TodoListController' is not a function, got undefined 但是，当我创建一个单独的html来容纳角度模板时，这是当我收到Argument 'TodoListController' is not a function, got undefined的错误时Argument 'TodoListController' is not a function, got undefined
Here's the structure: 结构如下：
HTML File: ../resources/views/master.php 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 File: ../public/assets/js/phone-app/app.module.js 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);
});
};
}
}
);
})();
Template File: ../public/assets/js/phone-app/templates/todo.html 模板文件： ../public/assets/js/phone-app/templates/todo.html templates / ../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>
If you'll notice, I moved the content on a separate template file. 如果您会注意到，我将内容移到了单独的模板文件中。 This loads the page with the template but returns an error on the console and just displays the page as is. 这将使用模板加载页面，但会在控制台上返回错误，仅按原样显示页面。
2 个解决方案
解决方案1
0 2016-06-02 22:48:52
I was able to get this work but somehow don't know how this works. 我能够完成这项工作，但不知如何运作。 @_@ Anyway, I just tried to search for examples on the AngularJS site and tried to "copy" them. @ _ @无论如何，我只是试图在AngularJS网站上搜索示例，然后尝试“复制”它们。 With that, I have arrived with this solution. 有了这个，我就得出了这个解决方案。
On the template file, I removed the ng-controller and change all the todoList with $ctrl . 在模板文件上，我删除了ng-controller并使用$ctrl更改了所有todoList 。
<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>
Will someone please explain to me how did the $ctrl worked in here and why the ng-controller is not necessary in this kind of structure versus the first one I stated above? 有人可以向我解释$ctrl如何在这里工作的，为什么ng-controller在这种结构中相对于我上面提到的第一个不是必需的？
解决方案2
-1 2016-06-02 22:42:16
Try to replace 尝试更换
.component
with 与
.directive
Maybe components have a bug 组件可能有错误
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.