ng-view范围与主范围通信

Question

这可能是一个愚蠢的问题，但已经晚了，我很绝望。我有一个使用 ngRoute 的 angularjs 应用程序。但一切都在一个控制器中完成。现在我在视图中有一个表单，该表单的使用是将其输入字段数据放入 var 中以随 post 一起发送。

不介意我试图查找错误的控制台日志。

APP.JS

'

    $scope.addDevice = function(){
        $scope.device = {};
        var data = {
            'Name' : $scope.device.ChildName,
            'Serial' : $scope.device.Serial
        };
        console.log($scope.device.Serial);
        console.log($scope.device.ChildName);
        console.log(data);
        $http.post('http://141.135.5.117:3500/device/register', data, { headers: headers })
        .then(function(response){
            console.log(response);
            console.log(headers);


        });

    }`

设置.html(注意：这是ng视图中的视图(

<form role="form" class='userForm'>
            <label for="addDevice">Add Device</label>
            <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="$scope.device.Serial">
            <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="$scope.device.ChildName">
            <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
            <p>{{$scope.device.Serial}}</p>
</form>

这是控制台输出

控制台输出

所有功能都在一个控制器中完成。

Answer 1

首先从 ng-model="$scope.device.Serial" 中删除$scope"并定义 $scope.device = {};外部 $scope.addDevice = function(({

$scope.device = {};

$scope.addDevice = function(({-- 你在这里编码 --}

工作代码示例

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope','$http', function($scope,$http) {
     $scope.val = '1';
     $scope.device = {};
     
     $scope.addDevice = function(){        
        var data = {
            'Name' : $scope.device.ChildName,
            'Serial' : $scope.device.Serial
        };
        console.log($scope.device.Serial);
        console.log($scope.device.ChildName);
        console.log(data);
        $http.post('http://141.135.5.117:3500/device/register', data)
        .then(function(response){
            console.log(response);
            console.log(headers);
        });
    }
     
     
     
   }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inputExample">
<div ng-controller="ExampleController">
<form role="form" class='userForm'>
            <label for="addDevice">Add Device</label>
            <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="device.Serial">
            <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="device.ChildName">
            <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
            <p>{{device.Serial}}</p>
</form>
</div>
</div>