简单绑定不起作用

时间:2016-06-01 14:26:55

标签: angularjs

在下面的代码段中,我无法打印search_username的简单值。

HTML code:

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="GibtHubViewer">

  {{search_username}} <!-- not getting displayed -->

  <form name="searchUser">
    <br/>
    <input type="search" placeholder="Username to search" ng-model="search_username" />
    <input type="submit" value="search" />
  </form>

  <br/>

  <div ng-controller="MainController">
    {{userdata.name}} {{error}}
  </div>

</body>

</html>

JS代码:

// Code goes here


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

  $scope.search_username = "anyname"; // Value assigned here


  var onComplete = function(response) {
    $scope.userdata = response.data;
  }

  var onError = function(reason) {
    $scope.error = "Not able to fetch data";
  }

  var request = $http.get("https://api.github.com/users/angular");

  request.then(onComplete, onError);



}

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

myModule.controller("MainController", ["$scope", "$http", MainController]);

谢谢

3 个答案:

答案 0 :(得分:2)

你的模型超出范围。你应该将所有模型放在由控制器定义它的范围内。

13:56:44.000 [main] serve -> INFO 035 Starting peer with id=name:"vp3" , network id=dev, address=172.31.43.65:30303, discovery.rootnode=172.31.45.37:30303, validator=true
13:56:44.001 [rest] StartOpenchainRESTServer -> INFO 036 Initializing the REST service on 0.0.0.0:5000, TLS is disabled.
13:56:45.002 [consensus/util] RegisterChannel -> INFO 037 Registering connection from <nil>
13:56:50.388 [consensus/util] RegisterChannel -> WARN 038 Received duplicate connection from <nil>, switching to new connection
13:56:50.831 [consensus/util] RegisterChannel -> WARN 039 Received duplicate connection from <nil>, switching to new connection
13:56:51.006 [consensus/util] RegisterChannel -> WARN 03a Received duplicate connection from <nil>, switching to new connection
13:56:51.006 [consensus/util] RegisterChannel -> WARN 03b Received duplicate connection from <nil>, switching to new connection
13:56:51.006 [peer] handleChat -> ERRO 03c Error handling message: Peer FSM failed while handling message (DISC_HELLO): current state: created, error: transition canceled with error: Error registering Handler: Duplicate Handler error: {name:"vp2"  172.31.37.75:30303 VALIDATOR }
13:56:51.006 [peer] handleChat -> ERRO 03d Error handling message: Peer FSM failed while handling message (DISC_HELLO): current state: created, error: transition canceled with error: Error registering Handler: Duplicate Handler error: {name:"vp1"  172.31.46.226:30303 VALIDATOR }

答案 1 :(得分:0)

您尝试打印模型的位置超出了使用的控制器的范围,请尝试以下操作:

<!DOCTYPE html>
    <html>

    <head>
      <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>

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

      {{search_username}} <!-- not getting displayed -->

      <form name="searchUser">
        <br/>
        <input type="search" placeholder="Username to search" ng-model="search_username" />
        <input type="submit" value="search" />
      </form>

      <br/>

      <div>
        {{userdata.name}} {{error}}
      </div>

    </body>


    </html>

答案 2 :(得分:0)

您正试图在控制器区域外显示{{search_username}}

search_username的范围中添加了MainController,但您尝试在MainController区域外打印。

<div ng-controller="MainController"> {{userdata.name}} {{error}} search_username - {{search_username}} // This will print the username </div>