25.02.2015, 15:18
|
|
Новичок на форуме
|
|
Регистрация: 25.02.2015
Сообщений: 3
|
|
|
ng-repeat не работает...
При нажатии на кнопку я добавляю элементы в массив и хочу увидеть список в ng-repeat. При первом нажатии все срабатывает замечательно. При втором - я вижу, что размер массива увеличился ({{data.length}}), но список не обновляется. Код программы:
<!doctype html>
<html>
<head>
<link href="../angular/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../angular/angular.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task}}
</td>
</tr>
</tbody>
</table>
</span>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
</body>
</html>
angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
$scope.data = [];
$scope.$on('something', function(event, data) {
$scope.data.push("Scope:" + data);
});
$rootScope.$on('something', function(event, data) {
$scope.data.push("rootScope:" + data);
});
})
.controller('ChildCtrl', function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
Наверное, руки кривые... Может кто подправит?
|
|
25.02.2015, 15:47
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
Заинтересовался так же этим случаем... Даже в один контролеер добавление внес... Так работает, пока на твою кнопку не нажмешь... 
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
angular.module('test', [])
.controller(
'ParentCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.data = [0,1,2,3,4];
$scope.$on('something', function(event, data) {
$scope.data.push("Scope:" + data);
});
$rootScope.$on('something', function(event, data) {
$scope.data.push("rootScope:" + data);
});
$scope.add=function(){
$scope.data[$scope.data.length]=$scope.data.length;
};
}
]
)
.controller(
'ChildCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
}
]
);
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}</span>
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task}}
</td>
</tr>
</tbody>
</table>
<div>{{data}}</div>
<button ng-click="add();">Add</button>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">Emit</button>
</div>
</div>
</body>
</html>
Сказать, что представление не видит модели - вроде не скажешь...
Последний раз редактировалось ksa, 25.02.2015 в 15:49.
|
|
25.02.2015, 15:51
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
|
Сообщение от YuriT64
|
|
Может кто подправит?
|
Моя кнопка (добавление в том же контроллере) работает на добавление. |
|
25.02.2015, 17:39
|
|
Новичок на форуме
|
|
Регистрация: 25.02.2015
Сообщений: 3
|
|
Сообщение от ksa
|
|
Моя кнопка работает на добавление.
|
Это, конечно, замечательно, что в некоторых случаях angular все таки работает  . Но вопрос был "почему не работает в моем случае"? Это у меня руки кривые или angular кривой?
Последний раз редактировалось YuriT64, 25.02.2015 в 17:45.
|
|
25.02.2015, 19:28
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
|
Сообщение от YuriT64
|
|
вопрос был "почему не работает в моем случае"?
|
Пока у меня нет ответа... Поскольку все "перехватчики" получают управление и массив меняется. |
|
26.02.2015, 01:50
|
 |
Аспирант
|
|
Регистрация: 24.04.2014
Сообщений: 66
|
|
|
Сообщение от YuriT64
|
|
Это, конечно, замечательно, что в некоторых случаях angular все таки работает . Но вопрос был "почему не работает в моем случае"? Это у меня руки кривые или angular кривой?
|
Круто. Похоже на баг в ангуляре. ngRepeat не хочет выводить"дубликаты". Просидел больше часа, удалось заставить работать, только после того как заставил элементы массива быть уникальными. В некоторых случаях может сойти за фичу, но таки "предупреждать же нада, господа разработчики....!!! ".
Короче - пиши маляву ангулярщикам, ежли есть мотивация, лично у меня с "активным английским" хреново. Читать по буржуински кое-как могу, писать - никак.
<!doctype html>
<html>
<head>
<!--link href="angular/bootstrap.min.css" rel="stylesheet" type="text/css" /-->
<script src="https://code.angularjs.org/1.3.9/angular.min.js" type="text/javascript"></script>
<script type='text/javascript'>angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
*!*
// $scope.data = ['asddsa','ewqwe','123432','123432','123432'];
// если раскоментируешь верхнюю строчку со $scope.data и закоментируешь нижнюю,
// то обнаружишь, что всё ломается ещё раньше - уже в момент начальной отрисовки.
// дубликаты, мать её....
*/!*
$scope.data = ['asddsa','ewqwe','123432'];
$scope.$on('something', function(event, _data) {
$scope.data.push("Scope:" + _data+'-'+$scope.data.length);
});
$rootScope.$on('something', function(event, _data) {
$scope.data.unshift("rootScope:" + _data+'-'+$scope.data.length);
});
})
.controller('ChildCtrl', function($scope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" style="background-color: Silver">
<div>{{data.length}}
<table style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{$index+') '+task}}
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ChildCtrl" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
<div><pre>{{data | json}}</pre></div>
</div>
</body>
</html>
Последний раз редактировалось MetaDriver, 26.02.2015 в 01:58.
|
|
26.02.2015, 02:14
|
|
Аспирант
|
|
Регистрация: 24.04.2014
Сообщений: 66
|
|
Попытка запустить "с дубликатами" в версии 1.4.0, приводит к тому же результату, то бишь баг вполне актуальный.
Значит тебе сюда --> https://github.com/angular/angular.js/issues
<!doctype html>
<html>
<head>
<!--link href="angular/bootstrap.min.css" rel="stylesheet" type="text/css" /-->
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.min.js" type="text/javascript"></script>
<script type='text/javascript'>angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
*!*
$scope.data = ['asddsa','ewqwe','123432','123432','123432'];
// если раскоментируешь верхнюю строчку со $scope.data и закоментируешь нижнюю,
// то обнаружишь, что всё ломается ещё раньше - уже в момент начальной отрисовки.
// дубликаты, мать её....
*/!*
// $scope.data = ['asddsa','ewqwe','123432'];
$scope.$on('something', function(event, _data) {
$scope.data.push("Scope:" + _data+'-'+$scope.data.length);
});
$rootScope.$on('something', function(event, _data) {
$scope.data.unshift("rootScope:" + _data+'-'+$scope.data.length);
});
})
.controller('ChildCtrl', function($scope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" style="background-color: Silver">
<div>{{data.length}}
<table style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{$index+') '+task}}
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ChildCtrl" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
<div><pre>{{data | json}}</pre></div>
</div>
</body>
</html>
|
|
26.02.2015, 08:34
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
|
Сообщение от MetaDriver
|
|
gRepeat не хочет выводить"дубликаты"
|
А мне вот не дает пока плюсануть... 
Твои исследования сподвиги меня продолжить изыскания в этом вопросе. 
Вот полностью рабочий вариант, как можно сделать с "дубликатами"... 
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
angular.module('test', [])
.controller(
'ParentCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.data = [
{name: 0},
{name: 1},
{name: 2}
];
$scope.$on('something', function(event, data) {
$scope.data.push({name: "Scope: " + data});
});
$rootScope.$on('something', function(event, data) {
$scope.data.push({name: "rootScope: " + data});
});
}
]
)
.controller(
'ChildCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
// вверх!
$scope.$emit('something', $scope.value);
}
}
]
);
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}</span>
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task.name}}
</td>
</tr>
</tbody>
</table>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">Emit</button>
</div>
</div>
</body>
</html>
|
|
26.02.2015, 09:35
|
|
Новичок на форуме
|
|
Регистрация: 25.02.2015
Сообщений: 3
|
|
|
Всем большое спасибо за участие.
|
|
|
|
