Angularjs 为什么我的有角卷发背带不起作用？_Angularjs_Controller_Curly Braces

Angularjs 为什么我的有角卷发背带不起作用？

angularjs

Angularjs 为什么我的有角卷发背带不起作用？,angularjs,controller,curly-braces,Angularjs,Controller,Curly Braces,我的花括号显示为花括号，我不知道出了什么问题，我做了一切…当我使用控制器操纵输入框时，它工作了。但是当我把文本输入到浏览器的输入框中时，它什么也不做这是我创建模块的地方： 'use strict'; var foodApp=angular.module('foodApp', []); 这是我的html： <script src="/lib/angular/angular.js"></script> <!DOCTYPE html> <html l

我的花括号显示为花括号，我不知道出了什么问题，我做了一切…当我使用控制器操纵输入框时，它工作了。但是当我把文本输入到浏览器的输入框中时，它什么也不做

这是我创建模块的地方：

'use strict';
 var foodApp=angular.module('foodApp', []);

这是我的html：

<script src="/lib/angular/angular.js"></script>

<!DOCTYPE html>

<html lang="en-us" >
<head>
<meta charset="utf-8">
<title>Food App</title>
</head>

<body>
<div  ng-controller="foodController" ng-app="foodApp">
    <input type="text" ng-model="foods"/>
    <input type="submit" value="Healthy Lunch?" />
    <br />
    <br />

    <h4>{{outcome}}</h4>

        {{foods}}
</div>
<script src="/js/food.js"></script>
<script src="/js/controllers/foodController.js"></script>
</body>
</html>


食品应用




{{结果}
{{食品}

这是我的控制器页面：

foodApp.controller('foodController', function($scope)
{

var foods = $scope.foods;
$scope.outcome=foods;
var foodsArray=foods.split(',');

if(foodsArray.length<=4)
$scope.outcome="Bon Appetit!";

else if(foodsArray.length<=7)
$scope.outcome="Pig!";

else
 $scope.outcome="One at a time, your scale is going to shout!!";
});

foodApp.controller（'foodController'，函数（$scope）
{
var foods=$scope.foods；
$scope.outcome=食品；
var foodsArray=foods.split（'，'）；
如果（foodsArray.length，问题实际上在控制器中。控制器中的代码在构造控制器时只执行一次。因此变量foods
未定义（因为$scope.foods
也未定义）。几行之后，您尝试运行foods.split（…）
但由于它未定义，因此会引发异常，应用程序将失败。这在浏览器的开发人员控制台中显示为错误
要修复它，您需要完全重构控制器代码
foodApp.controller('foodController', function($scope)
{
    $scope.handleFoodChange = function() {

        $scope.outcome = $scope.foods;
        if($scope.foods){
            var foodsArray = $scope.foods.split(',');

            if(foodsArray.length<=4)
                $scope.outcome = "Bon Appetit!";
            else if(foodsArray.length<=7)
                $scope.outcome = "Pig!";
            else
                $scope.outcome = "One at a time, your scale is going to shout!!";
        }
    }
});

foodApp.controller（'foodController'，函数（$scope）
{
$scope.handleFoodChange=函数（）{
$scope.outcome=$scope.foods；
如果（$scope.foods）{
var foodsArray=$scope.foods.split（'，'）；
如果（foodsArray.Length您是否忘记了包含angular framework的
标记？您的示例中似乎缺少该标记。不，它位于我的html文件的顶部，像这样包含。首先，它需要包含在您的html标记中。您是否可以查看浏览器控制台，看看是否还会抛出其他错误。无法100%判断，但由于需要括号，if-else块的结构可能不正确。能否提供更多信息？是否有任何错误消息？能否包含创建foodApp
模块的代码？目前，除了控件之外，没有足够的信息来解决问题ler代码可能没有像您预期的那样工作，但这是一个完全不同的问题。不，这没有帮助。没有抛出错误，if/else块也不重要，因为大括号在不应该出现的时候出现了。谢谢。我不确定我是否理解这个问题。我是否应该将$scope附加到控制器，我不能创建变量？我想我不明白为什么我的$scope.foods没有定义，它不应该只是一个空字符串，因为输入框中没有任何内容吗？你可以很好地使用变量。$scope.foods没有定义，因为控制器实际上只是一个函数-一个构造函数-在应用程序启动时只调用一次那是在用户有机会输入任何内容之前。因此，您的行var foods=$scope.foods（以及您的其余代码）只调用了一次。这就是为什么我创建了一个回调函数，这样您的代码就可以从您的视图中按需调用。我建议您找到一个关于angular的好教程，并密切关注它。angular可以有一个非常陡峭的学习曲线，这只是基本的学习曲线。
<input type="text" ng-model="foods" ng-change="handleFoodChange()" />