Angularjs нг-если не работает с нг-моделью

Question

Я использую angularjs для интеграции моего API.

У меня проблема с использованием ng-if внутри текстового поля.

ниже приведен мой фрагмент кода HTML:

<input type="text" value="" data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">

Здесь переменная редактирования находится в области видимости, которая находится в моем контроллере, я объявил это так:

$scope.edit = false;

Так что, если редактирование ложно, оно должно связываться с ng-model="name"и если редактирование верно, оно должно связываться с ng-model="singleAppDetails.name" Но это не связывает это, как ожидалось.

Дальше я пользуюсь $http.post отправить данные на сервер, как показано ниже:

 $scope.addApp = function(){    
       $scope.apps = []; 
        $scope.apps.push({'name':$scope.name, 'domain':$scope.domain, 'appId':$scope.appId, 'secret':$scope.secret});
        // Writing it to the server
        //      
        var dataObj = {
                name : $scope.name,
                domain : $scope.domain,
                appId : $scope.appId,
                secret : $scope.secret
        };  
        var res = $http.post('http://192.168.1.30:8090/apps/', dataObj);
        res.success(function(data, status, headers, config) {
            $scope.message = data;
        });
        res.error(function(data, status, headers, config) {
            alert( "failure message: " + JSON.stringify({data: data}));
        });     
        // Making the fields empty
        //
       $scope.name='';
       $scope.domain='';
       $scope.appId = '';
       $scope.secret = '';
    };

Но это всегда отправляет нулевые данные.

Answer 1

ng-if создает дочернюю область, потому что входные элементы не видят переменную области, определенную в контроллере, у вас есть два способа решить эту проблему

1. используйте ссылку на объект, например: $scope.user = { name : "" } внутри шаблона

   <input type="text" ng-model='user.name' />

2. вы можете сказать angular искать переменную в родительской области вместо дочерней области

   <input type="text" ng-model='$parent.name' />

Answer 2

ng-if имеет свою сферу применения. Итак name атрибут, который заполняется первым вводом, находится в области действия ng-if, а не в области действия вашего контроллера.

Второй вход должен работать нормально, при условии, что ваш контроллер инициализирует singleAppDetails ненулевым объектом:

$scope.singleAppDetails = {};

Правило большого пальца: всегда указывайте точку в вашей ng-модели. Всегда заполняйте объекты в области, а не в самой области.