为什么我的AngularJS $范围不起作用?

时间:2014-02-18 20:41:38

标签: javascript angularjs angularjs-scope

我对Angular非常新,而且仍然是Javascript的新手。我按照教程,但结果不适用于我的项目。

教程:http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day

HTML

<!DOCTYPE html>
<html ng-app="soCLean">
    <head></head>
    <body ng-controller="soCleanLandingPage">
        <div>
            <p>{{locale}}</p>
            <p>{{type}}</p>
            <p>{{service}}</p>
            <p>{{serviceSingle}}</p>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <script>
                var soClean = angular.module('soClean', []);
                    soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
                        $scope.locale = 'vancouver';
                        $scope.type = 'residential';
                        $scope.service = 'pressure washing';
                        $scope.serviceSingle = 'pressure wash';
                }]);
        </script>
    </body>
</html>

我已从上面的代码示例中删除了所有额外的东西,但我应该建议我也从Google CDN中提取两个字体和jQuery,并且有几个本地jQuery插件。

我也在使用一些外部CSS文件。整个页面可以在here找到。

PLease帮助我理解我做错了什么以及为什么这不起作用。感谢。

1 个答案:

答案 0 :(得分:6)

这是一个套管问题。将ng-app attr修复为“soClean”而不是“soCLean”。

http://plnkr.co/edit/ASWTQK9M4LfEhlpsbG9y?p=preview

<!DOCTYPE html>
<html ng-app="soClean">
    <head></head>
    <body ng-controller="soCleanLandingPage">
        <div>
            <p>{{locale}}</p>
            <p>{{type}}</p>
            <p>{{service}}</p>
            <p>{{serviceSingle}}</p>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <script>
                var soClean = angular.module('soClean', []);
                    soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
                        $scope.locale = 'vancouver';
                        $scope.type = 'residential';
                        $scope.service = 'pressure washing';
                        $scope.serviceSingle = 'pressure wash';
                }]);
        </script>
    </body>
</html>