У меня есть следующий код:
as.controller('OvrigtCtrl', function($scope, $rootScope, $http, $routeParams, $location)
{
$scope.opt = {};
$scope.addSupercustomerOvrigt = function()
{
$scope.doAddSupercustomer = true;
}
$scope.addS = function()
{
console.log($scope.opt.selectedTabell); //Shows the value
console.log($scope.selectedTabell); //Shows undefined
}
});
Html:
<div ng-if="doAddSupercustomer">
<table class="table">
<tr>
<td>Namn</td><td><input class="form-control input-sm2" type="text" ng-model="selectedNamn"></td>
</tr>
<tr>
<td>Abonnemangstabell</td><td><input class="form-control input-sm2" type="text" ng-model="opt.selectedTabell"></td>
</tr>
<tr>
<td>Har regportal</td><td><input type="checkbox" ng-model="selectedRegportal"></td>
</tr>
<tr>
<td>Fri DHCP</td><td><input type="checkbox" ng-model="selectedDhcp"></td>
</tr>
</table>
<button type="submit" ng-click="addS()" class="btn btn-success input-sm2">Lägg till</button>
</div>
Почему я получаю сообщение Undefined, когда Im не использует объекты для добавления переменных области видимости?
ng-model="selectedTabell"
console.log($scope.selectedTabell)
Код, приведенный выше.
ng-model="opt.selectedTabell"
$scope.opt = {};
console.log($scope.opt.selectedTabell)
Выполняется код выше. Я вижу значение, введенное пользователем.
Итак, мой вопрос, почему я должен использовать объект? В этом случае?
Вы сталкиваетесь с проблемой наследования дочернего объекта. ng-if
создаст дочернюю область внутри вашего контроллера, что означает, что область привязки к ящику ввода - это дочерний элемент области, привязанный к вашему контроллеру. Если вы привязываете данные к примитивному значению selectedTabell
, при первом обновлении окна ввода вы фактически создаете новое свойство selected3able в области дочерних объектов.
Решение состоит в том, чтобы избежать связывания с примитивным значением. Вместо этого убедитесь, что вы используете точечную нотацию путем привязки к объекту.
См. Угловую документацию: ознакомьтесь с областями для получения дополнительной информации
Наследование типов обычно просто, и вам часто даже не нужно знать, что это происходит... пока вы не попробуете привязку двухсторонних данных (т.е. Элементы формы, ng-model) к примитиву (например, число, строка, boolean), определенных в родительской области внутри области содержимого. Это не работает так, как многие ожидают, что он должен работать. Случается, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не то, что делает AngularJS - так работает прототипное наследование JavaScript. Новые разработчики AngularJS часто не понимают, что ng-repeat, ng-switch, ng-view и ng-include все создают новые дочерние области, поэтому проблема часто возникает, когда задействованы эти директивы. (См. Этот пример для быстрой иллюстрации проблемы.)
Эту проблему с примитивами можно легко избежать, следуя "лучшей практике" всегда иметь ".". в ваших ng-моделях