ngモデルの値は常に定義されていません

Question

私は角を学び、最も単純なアプリケーションを持っています。計算のためにバックエンドAPIに2つの値を追加して追加します。

私は2つのテキストフィールドにデフォルト値 'Enter Value'を持つng-modelディレクティブを持っており、最初はこの値がフォームフィールドにあります。

しかし、私がフォームフィールドに入力する値を取得しようとすると、それらは常に単一の変数またはオブジェクトの変数で定義されていません。

私は本当にこれが起こっている理由を理解し、フィールドにバインドされたモデルをngのない任意の変数が未定義ではありませんいけない：

var calculatorApp = angular.module('calculatorApp', [ 
'config', 
'ngRoute', 
'calculatorControllers', 
'calculatorServices' 
]); 

calculatorApp.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider. 
    when('/calculator', { 
     templateUrl: 'partials/calculator.html', 
     controller: 'CalculatorCtrl' 
    }). 
    when('/about', { 
     templateUrl: 'partials/about.html', 
     controller: 'AboutCtrl' 
    }). 
    otherwise({ 
    redirectTo: '/calculator' 
    }); 
}]); 

calculatorControllers.controller('CalculatorCtrl', ['$scope', 'CalculatorService', 
function($scope, CalculatorService) { 
$scope.orderProp = 'asc'; 
$scope.result = ' awaiting calculation'; 

$scope.sum = { 
    val1: 'Enter Value', 
    val2: 'Enter Value' 
} 

$scope.add = function(val1, val2) {     
    alert($scope.sum.val1); //always undefined even if form field shows value and so are val1 and val2 passed to this function from html page 
    var promise = CalculatorService.add(val1, val2); 

    promise.then(function successCallback(response) {    
     $scope.sum = response.data.result;  
    }, function errorCallback(response) { 
     console.log('Error: ', response);   
    });    
}; 
}]); 


<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-2">  

</div> 
<div class="col-md-10"> 
    <label> 
     Value One: <input type="text" name="lastName" ng-model="sum.val1" ng-minlength="3" ng-maxlength="5" /> 
    </label> 
    <label> 
     Value Two: <input type="text" name="lastName" ng-model="sum.val2" ng-minlength="3" ng-maxlength="5" /> 
    </label> 
    <button ng-click="add(sum.val1, sum.val2)">Add</button> 
    <div name="result" id="result">The result is <span ng-bind="result"></span></div> 
</div> 

Answer 1

あなたのDOMは、あなたのコントローラを認識していません。

ng-controller="CalculatorCtrl"を親のdivに追加することを忘れていると思います。

あなたの質問には書かれていないかもしれませんか？