Angularjs ng-if not working with ng-model

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有自己的作用域。因此，由第一个输入填充的 name 属性位于 ng-if 作用域中，而不是在控制器作用域中。

第二个输入应该可以正常工作，前提是控制器将 singleAppDetails 初始化为非空对象：

$scope.singleAppDetails = {};

经验法则：在你的ng模型中总是有一个点。始终填充作用域中的对象，而不是作用域本身。

Answer 2

>ng-if正在创建一个子作用域，因为输入元素看不到控制器中定义的范围变量 您有两种方法可以解决此问题

1. 使用对象引用前任： $scope.user = { name : "" } 在模板内

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

2. 您可以告诉 Angular 在父作用域而不是子作用域中查找变量

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