angularJS function in controller does not respond

Question

AngularJs ng-click does not respond

I'm trying to use the GitHub Search-API. When someone click the button my Controller should call a search from github here is my code

HTML:

<head>
  <script src="js/AngularJS/angular.min.js"></script>
  <script src="js/Controller/RepoController.js"></script>
</head>
<body ng-controller="RepoController">
 <input type="text" ng-model="param" /><button ng-click="search()">suchen</button>
  <ul>
    <li ng-repeat="repo in repos">
        {{repo.name}}
    </li>
  </ul>
 
</body>

and here is my controller:

var App = angular.module('RepoSearch', []);
 
function RepoController($scope, $http) {
    $scope.repos = [];

    $scope.search = function() {
        $http.get('https://api.github.com/search/repositories?q='+$scope.param).success(function(data) {
            $scope.repos = data['items'];
        }
    }
 
}

but my repos-array is still empty when I swap the $http.get with an alert it is working fine.

TruongSinh · Accepted Answer · 2014-01-28 12:31:15Z

1

You forgot to close ( after $scope.repos = data['items'];}, and to define ng-app, which in this case, can be in <head> : <head ng-app="RepoSearch"> http://docs.angularjs.org/api/ng.directive:ngApp

answered Jan 28, 2014 at 12:31

TruongSinh

4,90235 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3244228 Over a year ago

i defined ng-app in my html tag but i couldnt handle to inster it into code section :D

Community · Accepted Answer · 2017-05-23 12:25:43Z

1

The reason could be cross domain call. Use JSONP to call into github.

$http.jsonp('https://api.github.com/search/repositories?q='+$scope.param+'&callback=JSON_CALLBACK'+).success(function(data) {
            $scope.repos = data['items'];
}

The callback method maybe different so look at these SO posts

Using angularjs JSONP when callback cant be defined

Using JSONP method for $http service in AngularJS

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jan 28, 2014 at 12:52

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Comments

Ashutosh Jha · Accepted Answer · 2017-04-13 12:48:41Z

In HTML

<head ng-app="RepoSearch">
      <script src="js/AngularJS/angular.min.js"></script>
      <script src="js/Controller/RepoController.js"></script>
    </head>
    <body ng-controller="RepoController">
     <input type="text" ng-model="param" /><button ng-click="search()">suchen</button>
      <ul>
        <li ng-repeat="repo in repos">
            {{repo.name}}
        </li>
      </ul>

    </body>

in Controller

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


//bind controller with your app

App.controller('RepoController',RepoController);

function RepoController($scope, $http) {
    $scope.repos = [];

    $scope.search = function() {
        $http.get('https://api.github.com/search/repositories?q='+$scope.param).success(function(data) {
            $scope.repos = data['items'];
        }
    }

}

Collectives™ on Stack Overflow

angularJS function in controller does not respond

AngularJs ng-click does not respond

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

AngularJs ng-click does not respond

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related