Angularjs 当我将ng控制器置于div而不是body时，autocomplete停止工作_Angularjs_Angularjs Scope_Angular Ui

Angularjs 当我将ng控制器置于div而不是body时，autocomplete停止工作

angularjs

Angularjs 当我将ng控制器置于div而不是body时，autocomplete停止工作,angularjs,angularjs-scope,angular-ui,Angularjs,Angularjs Scope,Angular Ui,我有一个具有自动完成功能的文本框，单击“单击我”按钮后，自动完成中的文本将添加到表中，这是一个非常好的链接 var app = angular.module('app', []); app.factory('Service', function() { var typesHash = [ { id :1, name : 'lemon', price : 100, unit : 2.5 }, { id

我有一个具有自动完成功能的文本框，单击“单击我”按钮后，自动完成中的文本将添加到表中，这是一个非常好的链接

 var app = angular.module('app', []);
app.factory('Service', function() {
    var typesHash = [ {
        id :1,
        name : 'lemon',
        price : 100,
        unit : 2.5
    }, {
        id : 2,
        name : 'meat',
        price : 200,
        unit : 3.3
    } ];

    var localId = 3;
    availableTags = [
                      "ActionScript",
                      "AppleScript",
                      "Asp",
                      "BASIC",
                      "C",
                      "C++",
                      "Clojure",
                      "COBOL",
                      "ColdFusion",
                      "Erlang",
                      "Fortran",
                      "Groovy",
                      "Haskell",
                      "Java",
                      "JavaScript",
                      "Lisp",
                      "Perl",
                      "PHP",
                      "Python",
                      "Ruby",
                      "Scala",
                      "Scheme"
                    ];
    var service = {
        addTable : addTable,
        getData : getData,
        complete:complete


    };
    return service;
    function complete($scope){
        $( "#txt" ).autocomplete({
          source: availableTags,
          messages: {
              noResults: '',
              results: function() {}
          }
        });
        $("#txt" ).on( "autocompleteselect", function( event, ui ) {
         $scope.tableTools.inputData=ui.item.value;
        } );
        } 
    function addTable(name,price) {
        typesHash.push({id:localId++, name:name, price:price,unit:1});
    }
    function getData() {
        return typesHash;
    }
});
app.controller('table', function(Service,$scope) {
    //get the return data from getData funtion in factory
    this.typesHash = Service.getData();
    //get the addtable function from factory 
    this.addTable = Service.addTable;
    this.complete=Service.complete($scope);
});

但当我将ng controller=“table as tableTools”放在div中而不是body中时，文本框的自动完成就开始表现得很滑稽，它无法正常工作

有谁能解释一下原因，并告诉我如何修复它，即使在div中放入ng controller=“table as tableTools”，它也能正常工作

更新：

以下是错误：

未捕获类型错误：无法设置未定义的属性“inputData”

对于这一行：

$scope.tableTools.inputData = ui.item.value;

（请记住，问题是在单击建议文本后开始的）

如果您添加

$scope.tableTools={}

就在下面

function complete($scope){

第二个按预期工作

有人能解释原因吗

只要对象“$scope.tableTools”尚未定义，如果添加属性，则无法成功向其添加属性

$scope.tableTools={}

就在下面

function complete($scope){

第二个按预期工作

有人能解释原因吗

只要对象“$scope.tableTools”尚未定义，您就无法成功向其添加属性

发生这种情况，因为您在同一页面上有两个控制器，具有两个不同的元素，因此作用域未正确绑定

执行此操作的最佳代码是：-

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <title>Insert title here</title>
    <script>
    var app = angular.module('app', []);
    app.factory('Service', function() {
        var typesHash = [ {
            id :1,
            name : 'lemon',
            price : 100,
            unit : 2.5
        }, {
            id : 2,
            name : 'meat',
            price : 200,
            unit : 3.3
        } ];

        var localId = 3;
        availableTags = [
                          "ActionScript",
                          "AppleScript",
                          "Asp",
                          "BASIC",
                          "C",
                          "C++",
                          "Clojure",
                          "COBOL",
                          "ColdFusion",
                          "Erlang",
                          "Fortran",
                          "Groovy",
                          "Haskell",
                          "Java",
                          "JavaScript",
                          "Lisp",
                          "Perl",
                          "PHP",
                          "Python",
                          "Ruby",
                          "Scala",
                          "Scheme"
                        ];
        var service = {
            addTable : addTable,
            getData : getData,
            complete:complete


        };
        return service;
        function complete($scope){
            $( "#txt" ).autocomplete({
              source: availableTags,
              messages: {
                  noResults: '',
                  results: function() {}
              }
            });
            $("#txt" ).on( "autocompleteselect", function( event, ui ) {
              console.log($scope);
             $scope.tableTools.inputData=ui.item.value;
            } );
            } 
        function addTable(name,price) {
            typesHash.push({id:localId++, name:name, price:price,unit:1});
        }
        function getData() {
            return typesHash;
        }
    });
    app.controller('table', function(Service,$scope) {
        //get the return data from getData funtion in factory
        this.typesHash = Service.getData();
        //get the addtable function from factory 
        this.addTable = Service.addTable;
        this.complete=Service.complete($scope);
    });
    </script>
  </head>

  <body ng-app="app" ng-controller="table as tableTools" >
    <form >
      <div class="row commonRow"  >
        <div class="col-xs-1 text-right">
          item:
        </div>
        <div class="col-xs-5">
         <input id="txt" type="text" style="width: 100%;" ng-keyup="tableTools.complete()" ng-model="tableTools.inputData">
        </div>
        <div class="col-xs-2">
          <button class="btn btn-primary" ng-click="tableTools.addTable(tableTools.inputData);tableTools.inputData=''">
                click me
              </button>
        </div>
      </div>  
    </form>

    <div class="row commonRow">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>item</th>
            </tr>
          </thead>
          <tbody> <!--No need for controller here-->
            <tr ng-repeat="x in tableTools.typesHash track by x.id">
              <td>
                <div>{{x.name}}</div>
              </td>

            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>


在此处插入标题
var-app=angular.module（'app'，[]）；
应用程序工厂（'服务'，功能（）{
var typesHash=[{
id:1，
名字：'柠檬'，
价格：100，
单位：2.5
}, {
id:2，
名字：“肉”，
价格:200,，
单位：3.3
} ];
局部变量=3；
可用标签=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
var服务={
addTable:addTable，
getData:getData，
完成：完成
};
回程服务；
功能完成（$scope）{
$（“#txt”）.autocomplete({
资料来源：availableTags，
信息：{
结果：''，
结果：函数（）{}
}
});
$（“#txt”）.on（“autocompleteselect”，函数（事件、ui）{
console.log（$scope）；
$scope.tableTools.inputData=ui.item.value；
} );
} 
功能添加表（名称、价格）{
push（{id:localId++，name:name，price:price，unit:1}）；
}
函数getData（）{
返回类型SHASH；
}
});
应用控制器（'表'），功能（服务范围）{
//从工厂中的getData函数获取返回数据
this.typesHash=Service.getData（）；
//从工厂获取addtable函数
this.addTable=Service.addTable；
this.complete=Service.complete（$scope）；
});
项目：
点击我
项目
{{x.name}

发生这种情况是因为同一页上有两个控制器，其中有两个不同的元素，因此作用域没有正确绑定

执行此操作的最佳代码是：-

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <title>Insert title here</title>
    <script>
    var app = angular.module('app', []);
    app.factory('Service', function() {
        var typesHash = [ {
            id :1,
            name : 'lemon',
            price : 100,
            unit : 2.5
        }, {
            id : 2,
            name : 'meat',
            price : 200,
            unit : 3.3
        } ];

        var localId = 3;
        availableTags = [
                          "ActionScript",
                          "AppleScript",
                          "Asp",
                          "BASIC",
                          "C",
                          "C++",
                          "Clojure",
                          "COBOL",
                          "ColdFusion",
                          "Erlang",
                          "Fortran",
                          "Groovy",
                          "Haskell",
                          "Java",
                          "JavaScript",
                          "Lisp",
                          "Perl",
                          "PHP",
                          "Python",
                          "Ruby",
                          "Scala",
                          "Scheme"
                        ];
        var service = {
            addTable : addTable,
            getData : getData,
            complete:complete


        };
        return service;
        function complete($scope){
            $( "#txt" ).autocomplete({
              source: availableTags,
              messages: {
                  noResults: '',
                  results: function() {}
              }
            });
            $("#txt" ).on( "autocompleteselect", function( event, ui ) {
              console.log($scope);
             $scope.tableTools.inputData=ui.item.value;
            } );
            } 
        function addTable(name,price) {
            typesHash.push({id:localId++, name:name, price:price,unit:1});
        }
        function getData() {
            return typesHash;
        }
    });
    app.controller('table', function(Service,$scope) {
        //get the return data from getData funtion in factory
        this.typesHash = Service.getData();
        //get the addtable function from factory 
        this.addTable = Service.addTable;
        this.complete=Service.complete($scope);
    });
    </script>
  </head>

  <body ng-app="app" ng-controller="table as tableTools" >
    <form >
      <div class="row commonRow"  >
        <div class="col-xs-1 text-right">
          item:
        </div>
        <div class="col-xs-5">
         <input id="txt" type="text" style="width: 100%;" ng-keyup="tableTools.complete()" ng-model="tableTools.inputData">
        </div>
        <div class="col-xs-2">
          <button class="btn btn-primary" ng-click="tableTools.addTable(tableTools.inputData);tableTools.inputData=''">
                click me
              </button>
        </div>
      </div>  
    </form>

    <div class="row commonRow">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>item</th>
            </tr>
          </thead>
          <tbody> <!--No need for controller here-->
            <tr ng-repeat="x in tableTools.typesHash track by x.id">
              <td>
                <div>{{x.name}}</div>
              </td>

            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>


在此处插入标题
var-app=angular.module（'app'，[]）；
应用程序工厂（'服务'，功能（）{
var typesHash=[{
id:1，
名字：'柠檬'，
价格：100，
单位：2.5
}, {
id:2，
名字：“肉”，
价格:200,，
单位：3.3
} ];
局部变量=3；
可用标签=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
var服务={
addTable:addTable，
getData:getData，
完成：完成
};
回程服务；
功能完成（$scope）{
$（“#txt”）.autocomplete({
资料来源：availableTags，