当我将 ng-controller 放入 div 而不是 body autocomplete 时，它会停止工作

本文介绍了当我将 ng-controller 放入 div 而不是 body autocomplete 时，它会停止工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个具有自动完成功能的文本框，在单击单击我"按钮后，自动完成中的文本将添加到表格中，这是工作正常的链接，

I have a textbox with autocomplete capability and after clicking on click me button the text in autocomplete is added as in the table , here is the link that works perfectly fine,

 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 中，文本框的自动完成功能就开始变得有趣并且无法正常工作

but as soon as I put ng-controller="table as tableTools" in the div instead of body then autocompleting of text box start acting funny and it does not work properly

无效链接

谁能解释原因并告诉我如何修复它，即使将 ng-controller="table as tableTools" 放在 div 中也能正常工作?

can anyone explain the reason and tell me how I can fix it in a way that even by putting ng-controller="table as tableTools" inside div it works?

更新:

这里是错误:

未捕获的类型错误:无法设置未定义的属性inputData"

对于这一行:

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

(请记住，问题是在您点击建议文本后开始的)

(remember the problem starts after you click on suggested text)

推荐答案

问题隐藏在对 angularjs 对象生命周期的误解中.

The issue is hidden in missunderstanding of the angularjs object life-cycles.

这里最重要的是:

services (工厂/提供者...不同的创造，但最终相同)是单例
controllers 针对每个视图实例化.(在 Angular 应用程序生命周期中，一个控制器有很多多个实例..)

services (factory/provider ... different creation, but at the end the same) are singletons
controllers are instantiated per each view. (There are many, multi instances of one controller through the angular app life time..)

发生了什么?

只有一项服务:

app.factory('Service', function() {
   ...

并且有一个控制器将其作用域传递给该服务

and there is one controller passing its scope into that service

app.controller('table', function(Service,$scope) {
    ...
    this.complete=Service.complete($scope);

在页面上我们可以看到:

And on the page we can see:

// first usage of controller
// its first instance is created, $scope is passed
<div class="row commonRow" ng-controller="table as tableTools">

// second usage
// different instance is created... and it also passes the §scope
<tbody ng-controller="table as iterateTb">

但如上所述 - 服务只是一个.当第一个控制器传递它的 $scope 时，第二个控制器也在 while 之后传递......这就是导致问题的原因.

But as described above - service is only one. While first controller passes its $scope, the second does after while as well.. and that is causing the issue.

我们可以在控制器内部使用服务.这就是angular的设计原则.但是我们不应该通过 $scope...

We can use services inside of controllers. That is the design principle of angular. But we should not pass the $scope...

这篇关于当我将 ng-controller 放入 div 而不是 body autocomplete 时，它会停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

after