当我将 ng-controller 放入 div 而不是 body autocomplete 时，它​​会停止工作 [英] when I put ng-controller in div instead of body autocomplete stops working

问题描述

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

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 时，它​​会停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！