Question

我刚刚在线关注AngularJS教程，基本上他们以下列 FIDDLE 为例。现在我在本地尝试了这个例子，它不起作用。我的HTML如下所示：

<!doctype html>
<html class="no-js" lang="" ng-app="" >
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/style.css">

        <script type="text/javascript"
                src="https://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
        <script type="text/javascript"
                src="script.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


        <div ng-controller="MyCtrl">
            <h2>Parent Scope</h2>
            <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
            <br><br>
            <!-- attribute-foo binds to a DOM attribute which is always
                 a string. That is why we are wrapping it in curly braces so
                 that it can be interpolated.
            -->
            <my-component attribute-foo="{{foo}}" binding-foo="foo"
                          isolated-expression-foo="updateFoo(newFoo)" >
                <h2>Attribute</h2>
                <div>
                    <strong>get:</strong> {{isolatedAttributeFoo}}
                </div>
                <div>
                    <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
                    <i>// This does not update the parent scope.</i>
                </div>
                <h2>Binding</h2>
                <div>
                    <strong>get:</strong> {{isolatedBindingFoo}}
                </div>
                <div>
                    <strong>set:</strong> <input ng-model="isolatedBindingFoo">
                    <i>// This does update the parent scope.</i>
                </div>
                <h2>Expression</h2>
                <div>
                    <input ng-model="isolatedFoo">
                    <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
                    <i>// And this calls a function on the parent scope.</i>
                </div>
            </my-component>
        </div>
    </body>
</html>

我的script.js文件如下所示：

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between
                parent and isolated scope. */
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.foo = 'Hello!';
    $scope.updateFoo = function (newFoo) {
        $scope.foo = newFoo;
    }
}]);

为什么我的例子不在本地工作？我做错了什么？

我在控制台中遇到以下错误：

Error: Argument 'MyCtrl' is not a function, got undefined
    at Error (native)
    at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:488)
    at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)

Answer 1

对我来说很好，我只是将模块名称插入ng-app标签：myModule

<html class="no-js" lang="" ng-app="myModule" >

AngularJS范围示例不在本地工作

1 个答案: