2014-09-23 6 views
0

У меня проблема с видом Angularjs. Как-то я делаю что-то неправильно и не знаю, где проблема. Надеюсь, кто-то может мне помочь.Angularjs - привязка между контроллером и видом

Проблема в том, что проблема {{user.login}}(userRepoInfo.html file) не вызвана вообще не с контроллера, и если я делаю console.log, то она проходит через штраф. Я определенно делаю что-то неправильно между представлением и контроллером

I have five files 
1) gitHubApiServices.js 
2) gitHubApiController.js 
3) userRepoInfo.html 
4) app.js 
5) index.html 

Ниже gitHubApiServices.js

(function() { 
       var gitHubApiFactory = function($http) { 

        var factory = {}; 
        factory.getUserName = function(userName) { 
         console.log(userName + " " + "This is from Services") 
         return $http.get("https://api.github.com/users/" + userName); 
        }; 
        return factory; 
       }; 

       gitHubApiFactory.$inject = ['$http']; 

       angular.module('gitHubApp').factory('gitHubApiFactory',gitHubApiFactory); 

      }()); 

Ниже gitHubApiController.js

(function() { 

      var gitHubInfoController = function ($scope,gitHubApiFactory) { 
       $scope.user = null; 
       $scope.gitHubUser = function(userName) { 
        gitHubApiFactory.getUserName(userName) 
         .success(function (data) { 
          $scope.user = data; 
          console.log(data); 
         }) 
         .error(function(data, status, headers, config) { 
          $log.log(data.error + ' ' + status); 
         }); 
       } 
      }; 

      gitHubInfoController.$inject = ['$scope','gitHubApiFactory']; 

      angular.module('gitHubApp') 
       .controller('gitHubInfoController', gitHubInfoController); 
     }()); 

Ниже userRepoInfo.html

<div data-ng-controller="gitHubInfoController"> 
       <h1>Github App</h1> 
       <input type="text" id="gitUserName" ng-model="gitUser" placeholder="Please enter your GitHub Username"> 
       <a href="#" id="getUserRepo" ng-click="gitHubUser(gitUser)">Get my Repository</a> 

       {{user.login}} 
      </div> 

Ниже app.js

(function() { 

    var app = angular.module('gitHubApp', ['ngRoute']); 

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       controller: 'gitHubInfoController', 
       templateUrl: 'app/views/userRepoInfo.html' 
      }) 
      .otherwise({ redirectTo: '/' }); 
    }); 

}()); 

Ниже index.html

<!doctype html> 
<html data-ng-app="gitHubApp"> 
<head> 
    <title>Github Repository App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 

    <div data-ng-view></div> 


<script src="vendor/angular.js"></script> 
<script src="vendor/angular-route.js"></script> 
<script src="app/app.js"></script> 

<script src="app/controllers/gitHubApiController.js"></script> 
<script src="app/services/gitHubApiServices.js"></script> 
</body> 
</html> 

Пожалуйста, помогите мне с этой проблемой. Я провел пару часов, но не повезло.

Спасибо за ваши усилия

+0

Какой ошибки у получает в консоли – vinay

+0

, если в моем контроллере я сделать console.log (пользователя .login) он дает мне ReferenceError: пользователь не определен - как-то он пуст. – GeekOnGadgets

+0

Я определил свой контроллер. Я очень новичок в angularjs. так могло бы сделать это неправильно? – GeekOnGadgets

ответ

1

Я попробовал ваш код с {{}} user.login вместо {{$scope.user.login}} в plinkr и она отлично работает. Она возвращает свое имя пользователя (или любую другую информацию я требовать от GitHub RestFull Апи.

Вы не должны использовать $scope в представлении. Угловое Виль lfigure из собственно простор для вас и впрыснуть использовать его представлением.

Посмотрите на этом plunkr: http://plnkr.co/edit/16yyngPoZBgzVvfyWCDq

PS:. Я сплющенная структуру папок для простоты

+1

Привет, теперь я вижу, что проблема была в теге link, который я использовал. Спасибо, Али. Большое спасибо – GeekOnGadgets

+0

Рад, что это помогло –

Смежные вопросы