スコープ関数がモデルから渡されたデータを取得しないのはなぜですか？

Question

私はユーザーに姓と名を尋ねる簡単な角度のアプリケーションを持っていますが、何らかの理由でchangeBothNames（）関数がfirstNameとlastNameモデルを新しい値で渡すことができません。それはスタンドとしてここ

は私のアプリです：

var app = angular.module("myApp", []); 
 

 
app.controller("mainCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.message = "hello"; 
 
    $scope.firstName = ""; 
 
    $scope.lastName = ""; 
 
    $scope.fullName = $scope.firstName + " " + $scope.lastName; 
 
    $scope.updateName = function() { 
 
     $scope.fullName = $scope.firstName + " " + $scope.lastName; 
 
    } 
 
    $scope.changeBothNames = function(first, second) { 
 
     alert("aye", first, second); 
 
     $scope.firstName = first; 
 
     $scope.lastName = second; 
 
     $scope.updateName(); 
 
    } 
 
    } 
 
]);

[ng-app="myApp"] [ng-controller="mainCtrl"] { 
 
    max-width: 750px; 
 
    margin: 50px auto 0 auto; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"], 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] { 
 
    padding: 5px; 
 
    border: 0; 
 
    border-bottom: 1px solid #ccc; 
 
    margin-right: 10px; 
 
    outline: 0; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] { 
 
    border: 0; 
 
    color: ghostwhite; 
 
    padding: 15px; 
 
    font-weight: 700; 
 
    background-image: -webkit-linear-gradient(top, #00B6FF, #002D40); 
 
    background-image: linear-gradient(to bottom, #00B6FF, #002D40); 
 
    -webkit-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover { 
 
    -webkit-transform: translateY(-2px); 
 
    transform: translateY(-2px); 
 
    box-shadow: 0 5px 2px black; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] { 
 
    font-weight: 700; 
 
    text-transform: capitalize; 
 
    font-size: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="mainCtrl"> 
 
    <div class="row"> 
 
     <input ng-model="firstName" placeholder="Enter a first name"> 
 
     <input ng-model="lastName" placeholder="Enter a last name"> 
 
     <button ng-click="changeBothNames(firstName, lastName)">Update Name</button> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="output" ng-if="fullName = ' ' "> 
 
     <div id="greeting">{{firstName}} {{lastName}}</div> 
 
     </div> 
 
     <div id="output" ng-if="fullName != ' ' "> 
 
     <div id="greeting">{{message}}</div>{{fullName}} 
 
     </div> 
 
    </div> 
 
    </div>

あなたは、画面上が、そのが正しく渡されていない何らかの理由で出力を見ることができるので、モデルが明らかに更新されます、 何か案は？

Answer 1

値は渡されていますが、alertは1つのパラメータしか取りません。それをconsole.logに変更してください。

var app = angular.module("myApp", []); 
 

 
app.controller("mainCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.message = "hello"; 
 
    $scope.firstName = ""; 
 
    $scope.lastName = ""; 
 
    $scope.fullName = $scope.firstName + " " + $scope.lastName; 
 
    $scope.updateName = function() { 
 
     $scope.fullName = $scope.firstName + " " + $scope.lastName; 
 
    } 
 
    $scope.changeBothNames = function(first, second) { 
 
     console.log("aye", first, second); 
 
     document.getElementById('message').innerHTML = first + ' ' + second; 
 
     $scope.firstName = first; 
 
     $scope.lastName = second; 
 
     $scope.updateName(); 
 
    } 
 
    } 
 
]);

[ng-app="myApp"] [ng-controller="mainCtrl"] { 
 
    max-width: 750px; 
 
    margin: 50px auto 0 auto; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"], 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] { 
 
    padding: 5px; 
 
    border: 0; 
 
    border-bottom: 1px solid #ccc; 
 
    margin-right: 10px; 
 
    outline: 0; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] { 
 
    border: 0; 
 
    color: ghostwhite; 
 
    padding: 15px; 
 
    font-weight: 700; 
 
    background-image: -webkit-linear-gradient(top, #00B6FF, #002D40); 
 
    background-image: linear-gradient(to bottom, #00B6FF, #002D40); 
 
    -webkit-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover { 
 
    -webkit-transform: translateY(-2px); 
 
    transform: translateY(-2px); 
 
    box-shadow: 0 5px 2px black; 
 
} 
 
[ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] { 
 
    font-weight: 700; 
 
    text-transform: capitalize; 
 
    font-size: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="mainCtrl"> 
 
    <div class="row"> 
 
     <input ng-model="firstName" placeholder="Enter a first name"> 
 
     <input ng-model="lastName" placeholder="Enter a last name"> 
 
     <button ng-click="changeBothNames(firstName, lastName)">Update Name</button> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="output" ng-if="fullName == ' ' "> 
 
     <div id="greeting">{{firstName}} {{lastName}}</div> 
 
     </div> 
 
     <div id="output" ng-if="fullName != ' ' "> 
 
     <div id="greeting">{{message}}</div>{{fullName}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <pre id="message"></pre>