为什么我的 angular 大括号不起作用？

Question

我的花括号显示为花括号，我不明白哪里出了问题，我做了一切...当我使用控制器操纵输入框时，它起作用了。但是当我在浏览器的输入框中输入文本时，它什么也没做..

这是我创建模块的地方：

'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!!";
});

Answer 1

问题实际上出在您的控制器上。控制器中的代码仅在构造控制器时执行一次。因此变量 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!!";
        }
    }
});

在您看来，您应该将输入更改为：

<input type="text" ng-model="foods" ng-change="handleFoodChange()" />

这应该会使您的应用程序按预期工作。现在，每当您在输入字段中进行更改时，都会调用函数 handleFoodChange，它会处理为 $scope.outcome 变量设置值的逻辑。

Here's a Plunker showing it working

为什么我的 angular 大括号不起作用？

Why are my angular curly braces not working?

controller

curly-braces

angularjs