Question

我正在撰写本书中的示例应用AngularJS。

在以下代码中，{{funding.needed}}未显示为10 * startingEstimate。它在页面上以{{funding.needed}}字面显示，即未呈现。

为什么？

<html ng-app>
<body ng-controller="TextController">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
      </script>

    <form ng-controller="StartUpController">
        Starting: <input ng-change="computeNeeded()"
                         ng-model="funding.startingEstimate">
        Recommendation: {{funding.needed}}
    </form>

    <script>
        function StartUpController($scope) {
            $scope.funding = { startingEstimate: 0};

            $scope.computeNeeded = function() { 
                $scope.needed = $scope.startingEstimate * 10;
            };
        }
    </script>
</body>
</html>

Answer 1

你需要删除TextController，因为你没有定义它，并且它阻止加载其他东西，因为它出错。此外，您还需要在某些地方规范化使用$ scope.funding对象，尝试仅使用没有父引用的成员。以下是一个工作版本（参见http://plnkr.co/edit/Jz95UlOakKLJIqHvkXlp?p=preview上的plunker工作）

<html ng-app>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
      </script>

    <form ng-controller="StartUpController">
        Starting: <input ng-change="computeNeeded()"
                         ng-model="funding.startingEstimate">
        Recommendation: {{funding.needed}}
    </form>

    <script>
        function StartUpController($scope) {
            $scope.funding = { startingEstimate: 0};

            $scope.computeNeeded = function() { 
                $scope.funding.needed = $scope.funding.startingEstimate * 10;
            };
        }
    </script>
</body>
</html>

使用ng-bind进行变量无渲染

1 个答案: