Question

我一直在学习一门学习angularjs的课程，但我似乎无法使用简单的ng-click绑定工作。

HTML：

<body ng-controller="MainController">

    <div ng-app="githubViewer">

        <h1>{{message}}</h1>

        <div>{{ error }}</div>

        {{username}}

        <form name="searchUser">
            <input type="search" placeholder="Username to find" ng-model="username" />
            <input type="submit" value="Search" ng-click="search(username)" />
        </form>

        <div>
            <div>{{user.name}}</div>
            <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">
            {{user.gravatar_id}}
        </div>

    </div>

</body>

使用Javascript：

(function () {

    var module = angular.module("githubViewer", []);

    var MainController = function ($scope, $http) {

        var onUserComplete = function (response) {
            $scope.user = response.data;
        };

        var onError = function (reason) {
            $scope.error = "Could not fetch the user";
            $scope.reason = reason;
        };

        $scope.username = "angular";
        $scope.message = "Github Viewer";

        $scope.search = function (username) {
            $http.get("https://api.github.com/users/" + username)
                .then(onUserComplete, onError);
        };
    };

    module.controller("MainController", MainController);

}());

当您点击搜索按钮（搜索用户名＆＃34; odetocode＆＃34;或＆＃34; robconery＆＃34;）时，它应该显示图像，但点击事件似乎没有被触发。我已经搜索了文档并再次查看了课程，但我无法看到我做错了什么。

我目前正在使用angularjs版本1.2.16。

Answer 1

您现在在ng-controller声明之外有ng-app声明：

<body ng-controller="MainController">

    <div ng-app="githubViewer">

它应该是相反的方式，或者两者都在同一个元素上

<body ng-app="githubViewer" ng-controller="MainController">

    <div>

AngularJS评估您的代码，并检查您从ng-app元素声明的任何指令，包括声明它的元素;这当前缺少ng-controller指令，因为它放在ng-app元素的父元素上。

Answer 2

您需要将控制器放在模块的上下文中，以使其在其范围内。

喜欢这样

<body ng-app="githubViewer" ng-controller="MainController">

Demo here

为什么Angular ng-click事件没有触发？

2 个答案: