Question

我是新的，仍在学习angularjs，似乎我遇到了我的第一个问题。角度数据绑定工作正常，直到我将ng-controller="dataCtrl"放入我的body标签。什么似乎是问题，我认为我做了正确的事情，这里是我做的代码。

<!DOCTYPE html>
<html ng-app="musicApp">
  <head> 

  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">    </script>
  <script src="script.js"></script>

  <title> AMBOT HAIM! </title>
  </head>

  <body ng-controller="dataCtrl">

   <input type="text" class="form-control" ng-model="search"></input>

   <h5> you input : </h5> {{ search }} 

  </body>

</html>

我的脚本代码：

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


app.Controller("dataCtrl",["$scope", function(){

      $scope.data = [
      {
        firstname: "arnold",
        midname: "mike",
        lastname: "sukina",
      },

       {
        firstname: "bryant",
        midname: "milagro",
        lastname: "simba",
      }]   

}]);

Answer 1

var app = angular.module("musicApp",[]);


app.controller("dataCtrl",function($scope){

      $scope.data = [
      {
        firstname: "arnold",
        midname: "mike",
        lastname: "sukina",
      },

       {
        firstname: "bryant",
        midname: "milagro",
        lastname: "simba",
      }]   

});

<!DOCTYPE html>
<html ng-app="musicApp">
  <head> 

  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">    </script>
  <script src="script.js"></script>

  <title> AMBOT HAIM! </title>
  </head>

  <body ng-controller="dataCtrl">

   <input type="text" class="form-control" ng-model="search"></input>

   <h5> you input : </h5> {{ search }} 

  </body>

</html>

控制器应为小写controller，$scope应在函数参数中定义。检查上面的代码片段，您的代码工作正常。

Answer 2

您正在使用ng-model将表单链接到值search，但是您在范围内没有search值。

在范围中添加search值：

app.Controller("dataCtrl",["$scope", function(){

      $scope.search = "YourValues";

      $scope.data = [
      {
        firstname: "arnold",
        midname: "mike",
        lastname: "sukina",
      },

       {
        firstname: "bryant",
        midname: "milagro",
        lastname: "simba",
      }]   

}]);

然后ng模型将输入值与$scope.search变量相关联。

Answer 3

您的控制器构造函数缺少$scope参数。

//DO this
app.Controller("dataCtrl",["$scope", function($scope){
//NOT this
//app.Controller("dataCtrl",["$scope", function(){

      $scope.search = "YourValues";

      $scope.data = [
      {
        firstname: "arnold",
        midname: "mike",
        lastname: "sukina",
      },

Answer 4

controller和$scope的用户小写必须作为函数参数导入。见下文：

app.controller("dataCtrl",function($scope){
...
});

只需用此替换您的代码行，并且不要忘记删除最后一行的]，它应该可以正常工作。

我将控制器放在body标签后，angularjs数据绑定无法正常工作

4 个答案: