LINUX.ORG.RU

Некорректное связывание данных в ангуларе

 


0

1

Сделал такую вот страницу + скрипт: index.html:

<html ng-app="app">
<head>
   <script src="angular.js"></script>
   <script src="angular-route.js"></script>
   <script src="script.js"></script>
</head>
<body>

	<div ng-view></div>
</body>
</html>

script.js:

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('/', {
                templateUrl: 'route.html',
                controller: 'RouteController',
            }).otherwise('/');
}]);

app.controller('RouteController', ['$scope', function($scope) {
	$scope.hello='world';
}]);

app.controller('IncController', ['$scope', function($scope) {
	$scope.field = '';
	$scope.test = function() {
		console.log('test=' + $scope.field);
	}
}]);

route.html:

<div>
hello world
<div>{{hello}}</div>
<ng-include src="'including.html'"
            ng-controller="IncController"></ng-include>
</div>

including.html:

<input type='text' ng-model='field'/>
<input type='button' ng-click='test()'/>

Нажимаю на кнопку метод test() дергается, test= на консоль выводится, а поле field всегда пустое. При этом если сделать route на including.html все работает.

Что я делаю не так?


Что я делаю не так?

  • Пользуешься ngController вместо того, чтобы сделать директиву. Я не представляю, почему. ngController — антипаттерн сам по себе и сдохнет к ангуляру2, а у тебя там ещё и шаблон в том же элементе.
  • Не пользуешься controllerAs. https://github.com/angular/angular.js/issues/10148 починит даже если ты по-прежнему оставишь ngInclude + ngController вместо определения директивы
x3al ★★★★★ ()
Последнее исправление: x3al (всего исправлений: 1)

$scope.field = ";

Кстати, не нужно при условии, что ты пользуешься controllerAs либо в именах всех моделей есть точка.

x3al ★★★★★ ()
Ответ на: комментарий от x3al

а на что собираются менять ngController?

У меня слегка праздный вопрос, потому что мы здоровенный UI переводим с ангуляра на реакт, но всё таки интересно.

max_lapshin ★★★ ()
Ответ на: комментарий от max_lapshin

There are way too many disparate ways to attach a controller to a template. ng-controller, route definitions, directives, etc… ng-controller is the least flexible of the bunch.

и далее даже

Make everything a directive

https://medium.com/@bluepnume/sane-scalable-angular-apps-are-tricky-but-not-i...

О том же говорили и раньше: http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-bannin...

x3al ★★★★★ ()
Ответ на: комментарий от x3al

угу.

Очень конечно сложно. Ангуляр не очень удачно выбрал примитивы, поэтому есть нереально сложные в объяснении вещи, которые ещё и не очень стабильно работают.

max_lapshin ★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.