堆棧內存溢出
  簡體   English   中英

Laravel + AngularJS控制器已存在，但返回的錯誤不是函數

[英]Laravel + AngularJS controller is existing but returns an error of not a function

 原文  2016-06-02 22:22:10  0   2    javascript/ php/ angularjs/ laravel/ laravel-5.2

問題描述

我剛剛對AngularJS感興趣，並且想使用Laravel（5.2）集成它，因此我能夠以這種方式成功加載Laravel和Angular。

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的錯誤時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 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>

如果您會注意到，我將內容移到了單獨的模板文件中。 這將使用模板加載頁面，但會在控制台上返回錯誤，僅按原樣顯示頁面。

2 個解決方案

解決方案1
 0  2016-06-02 22:48:52

我能夠完成這項工作，但不知如何運作。 @ _ @無論如何，我只是試圖在AngularJS網站上搜索示例，然后嘗試“復制”它們。 有了這個，我就得出了這個解決方案。

在模板文件上，我刪除了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>

有人可以向我解釋$ctrl如何在這里工作的，為什么ng-controller在這種結構中相對於我上面提到的第一個不是必需的？

解決方案2
 -1  2016-06-02 22:42:16

嘗試更換 

.component

與 

.directive

組件可能有錯誤

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AngularJS控制器不是函數錯誤 AngularJS通用函數，返回已加載的控制器 AngularJS控制器返回表格 AngularJS - 錯誤控制器不是函數，未定義 在控制器中調用AngularJS服務函數時出錯？ AngularJS 控制器錯誤 - ：$http.get 不是控制器部分中的函數 在angularjs控制器中定義的函數的函數未定義錯誤 AngularJS控制器承諾然后不是函數 無法識別AngularJS控制器功能 在AngularJS控制器上調用函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM