个人中心
gpt4 book ai didi

javascript - Laravel + AngularJS Controller 已存在，但返回不是函数的错误

转载 作者：行者123 更新时间：2023-11-28 10:48:43 24 4
gpt4 key购买 nike

我刚刚接触 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 来容纳 Angular 模板时，这是我收到错误 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>

如果您注意到了，我将内容移至单独的模板文件中。这会加载带有模板的页面，但会在控制台上返回错误并仅按原样显示页面。

最佳答案

我能够完成这项工作，但不知何故不知道它是如何工作的。 @_@无论如何，我只是尝试在 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 吗？

关于javascript - Laravel + AngularJS Controller 已存在，但返回不是函数的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37603096/

24 4 0
文章推荐： javascript - Ionic 2 使用 .ts 而不是 .js 文件
文章推荐： javascript - 如何循环遍历 JSON 数组直到满足条件？
文章推荐： javascript - 如何防止 Javascript 将本地时区应用于 Date() 对象？
文章推荐： javascript - 如何使用 jQuery 重新附加元素？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com