Question

我正在使用AngularJS在我的第一个网站上工作。当我在html标签中声明ng-app时，我的应用程序正常工作。但是，当我尝试为ng-app指令指定一个名称时数据绑定停止工作，这样我就可以创建一个带有控制器和过滤器的模块。

以下是我的工作代码：

<!doctype html>
<html data-ng-app>
    <head>
        <meta charset="utf-8">
        <title>Twittiment</title>
        <link href="search_client.css" type="text/css" rel="stylesheet" />
        <link href="tweet.css" type="text/css" rel="stylesheet" />
        <script src="jquery.min.js"></script>
        <script src="search_client.js"></script>
        <script src="/js/highcharts.js"></script>
    </head>

    <body data-ng-controller="TweetCtrl">
        <div id="main">
            <div id="search_box">
                <h1 id="title">Twitter Sentiment Analysis</h1>

                <input name="search_terms" autofocus="autofocus" data-ng-model="query" />
                <button id="search_button" data-ng-click="search()">Search</button>
                <div id="data"></div>I can add:{{1+3}}</div>
            <div id="search_results">Search tweets:
                <input name="filter" data-ng-model="text" /><span>Displaying {{(tweets|filter:text).length}} of {{tweets.length}} tweets</span>

                <div class="tweet" data-ng-repeat="tweet in tweets | filter:text">
                    <div class="tweet_left">
                        <div class="tweet_image"> <a href="https://twitter.com/{{tweet.user.screen_name}}">
                        <img src="{{tweet.user.profile_image_url}}">
                    </a>

                        </div>
                    </div>
                    <div class="tweet_right">
                        <div class="tweet_triangle"></div>
                        <div class="tweet_row">
                            <div class="tweet_username"> <a href="https://twitter.com/{{tweet.user.screen_name}}" target="search">{{tweet.user.screen_name}}</a>
 <span class="tweet_name">{{tweet.user.name}}</span>
 <span class="delete_tweet">Mark as irrelevant</span>
                                <input class="close_button" type="image" src="/xmark.jpg" alt="submit" ng-click="delete($index)">
                            </div>
                        </div>
                        <div class="tweet_row">
                            <div class="tweet_text">{{tweet.text}}</div>
                        </div>
                        <div class="tweet_row">
                            <div class="tweet_timestamp">
                                <img class="stream_bluebird" src="bird_16_blue.png"> <span class="retweets">{{tweet.retweet_count}} retweets</span>
 <a href="http://twitter.com/{{tweet.user.screen_name}}/status/{{tweet.id}}" target="search" class="tweet_time_link">{{tweet.created_at}}</a>

                                <img src="reply.png" class="imageof_reply"> <a href="http://twitter.com/intent/tweet?in_reply_to={{tweet.id}}" target="search">Reply</a>

                                <img src="retweet.png" class="imageof_retweet"> <a href="http://twitter.com/intent/retweet?tweet_id={{tweet.id}}" target="search">Retweet</a>

                                <img src="favorite.png" class="imageof_favorite"> <a href="http://twitter.com/intent/favorite?tweet_id={{tweet.id}}" target="search">Favorite</a>

                            </div>
                        </div>
                    </div>
                    <div class="sentiment" data-ng-controller="RatingCtrl">
                        <div class="rating" data-ng-model="tweet.polarity">{{tweet.polarity}}</div>
                        <button data-ng-click="changeRating('Positive')">
                            <img class="positive" src="/thumbs-up-button.jpg">
                        </button>
                        <button data-ng-click="changeRating('Neutral')">
                            <img class="neutral" src="/thumbs-sideways-button.jpg">
                        </button>
                        <button data-ng-click="changeRating('Negative')">
                            <img class="negative" src="/thumbs-down-button.jpg">
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="total">
             <h2 id="totalTitle"></h2>

            <div>{{tweets.length}}</div>
            <div id="totalPos"></div>
            <div id="totalNeut"></div>
            <div id="totalNeg"></div>
        </div>
        <div id="container" style="width:40%; height:400px;"></div>
        <script src="/ang-Twittiment/app/lib/angular/angular.js"></script>
    </body>
</html>

JS：

function TweetCtrl($scope, $http) {
    $scope.search = function () {
        $http({
            method: 'GET',
            url: 'http://localhost:8080/search_server.php?q=' + $scope.query
        }).success(function (data) {
            $scope.tweets = data;
        })
            .error(function (data) {
            alert("search error")
        });
    };
    $scope.delete = function (idx) {
        $scope.tweets.splice(idx, 1);
    };
}

function RatingCtrl($scope) {
    $scope.changeRating = function (rating) {
        $scope.tweet.polarity = rating;
    }
}

以下代码不起作用：

<html data-ng-app="myApp">

JS：

var myAppModule = angular.module('myApp', []);

myAppModule.controller('TweetCtrl', function ($scope, $http) {
    $scope.search = function () {
        $http({
            method: 'GET',
            url: 'http://localhost:8080/search_server.php?q=' + $scope.query
        }).success(function (data) {
            $scope.tweets = data;
        })
            .error(function (data) {
            alert("search error")
        });
    };
    $scope.delete = function (idx) {
        var person_to_delete = $scope.tweets[idx];

        $scope.tweets.splice(idx, 1);
    };
});

myAppModule.controller('RatingCtrl', function ($scope) {
    $scope.changeRating = function (rating) {
        $scope.tweet.polarity = rating;
    }
});

任何人都可以告诉我为什么每当我为ng-app指令指定名称时数据绑定都会停止？配置模块时是否缺少一个步骤？非常感谢任何帮助，如果需要更多信息，请告诉我。

Answer 1

实际上你需要在angular.module语句之前放置你的angular.js文件引用，这样它就可以识别角度，否则当你检查javascript错误时它会显示angular is not defined

Answer 2

var myAppModule = angular.module('myAppModule', []);

这应该这样做。

当您声明ng-app =“myApp”时，angular compiler会搜索使用“myApp”注册的控制器，但控制器已注册“myAppModule”

命名ng-app打破了angularjs中的数据绑定

2 个答案: