当我把NG-控制器DIV,而不是身体自动完成停止工作 [英] 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控制器=表作为tableTools的DIV,而不是身体,然后自动填入文本框的开始行动滑稽,它不能正常工作
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-控制器=表作为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?
更新:的
Update:
这里是错误:
未捕获类型错误:无法设置属性未定义inputData
这条线:
$scope.tableTools.inputData = ui.item.value;
(记住你点击建议的文本后,问题开始)
(remember the problem starts after you click on suggested text)
推荐答案
这个问题是隐藏在 angularjs
对象生命周期的missunderstanding。
The issue is hidden in missunderstanding of the angularjs
object life-cycles.
这里最重要的是要知道的是:
The most important here to know is:
-
服务
的(厂家/供应商...不同的创作,但最后一样)的有单身 -
控制器
为实例每一查看即可。的(还有通过角应用续航时间一个控制器的多,多实例..)的
services
(factory/provider ... different creation, but at the end the same) are singletonscontrollers
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">
但如上所述 - 服务只有一个。虽然第一个控制器通过它 $范围
,第二个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.
我们可以使用的服务控制器内。这就是棱角分明的设计原则。但是,我们不应该通过$范围...
We can use services inside of controllers. That is the design principle of angular. But we should not pass the $scope...
这篇关于当我把NG-控制器DIV,而不是身体自动完成停止工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!