Области применения переменных и объектов в угловых

0

У меня есть следующий код:

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)

Выполняется код выше. Я вижу значение, введенное пользователем.

Итак, мой вопрос, почему я должен использовать объект? В этом случае?

Теги:

1 ответ

0
Лучший ответ

Вы сталкиваетесь с проблемой наследования дочернего объекта. ng-if создаст дочернюю область внутри вашего контроллера, что означает, что область привязки к ящику ввода - это дочерний элемент области, привязанный к вашему контроллеру. Если вы привязываете данные к примитивному значению selectedTabell, при первом обновлении окна ввода вы фактически создаете новое свойство selected3able в области дочерних объектов.

Решение состоит в том, чтобы избежать связывания с примитивным значением. Вместо этого убедитесь, что вы используете точечную нотацию путем привязки к объекту.

См. Угловую документацию: ознакомьтесь с областями для получения дополнительной информации

Наследование типов обычно просто, и вам часто даже не нужно знать, что это происходит... пока вы не попробуете привязку двухсторонних данных (т.е. Элементы формы, ng-model) к примитиву (например, число, строка, boolean), определенных в родительской области внутри области содержимого. Это не работает так, как многие ожидают, что он должен работать. Случается, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не то, что делает AngularJS - так работает прототипное наследование JavaScript. Новые разработчики AngularJS часто не понимают, что ng-repeat, ng-switch, ng-view и ng-include все создают новые дочерние области, поэтому проблема часто возникает, когда задействованы эти директивы. (См. Этот пример для быстрой иллюстрации проблемы.)

Эту проблему с примитивами можно легко избежать, следуя "лучшей практике" всегда иметь ".". в ваших ng-моделях

Ещё вопросы

Сообщество Overcoder
Наверх
Меню