$スコープの問題

Question

私はすでにこの問題について多くの質問を見ましたが、私は答えを理解できませんでした。私はモジュールとコントローラのいくつかの例を見ましたが、試してみるとうまくいきません。

ウェブサイトのコードをコピーして、問題なく動作するかどうかを確認しましたが、まだ動作していません。

これはコードです：

var myapp = angular.module("myapp", []); 
 
myapp.controller("HelloCtrl", function($scope) { 
 
    $scope.user = { 
 
    name: "name123", 
 
    nickName: "nickName123", 
 

 
    callMe: function() { 
 
     var userObject = $scope.user; 
 
     return userObject.name + " Known as " + userObject.nickName; 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="HelloCtrl"> 
 
    <!--הטופס--> 
 
    First Name: 
 
    <input type="text" ng-model="user.name" /> 
 
    <br />Last Name: 
 
    <input type="text" ng-model="user.nickName" /> 
 
    <br /> 
 

 
    </div> 
 
</div> 
 
{{user.callMe()}}

私はコードをデバッグするとき、これは私が得るものです：

Answer 1

あなたの角度の補間は、あなたの補間がコントローラdivの内側にあると角度への参照を追加する必要があり、あなたの角度アプリ;-)

var myapp = angular.module("myapp", []); 
 
myapp.controller("HelloCtrl",function($scope){ 
 
    $scope.user = { 
 
     name: "name123", 
 
     nickName: "nickName123", 
 

 
     callMe: function(){ 
 
      console.log('called'); 
 
     var userObject = $scope.user; 
 
     return userObject.name + " Known as " + userObject.nickName; 
 
     } 
 
    }; 
 
}); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document.querySelector('#app'), ['myapp']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<div id="app" ng-controller="HelloCtrl"> 
 
     <!--הטופס--> 
 
     First Name:<input type="text" ng-model="user.name" /> 
 
     <br /> 
 
     Last Name:<input type="text" ng-model="user.nickName" /> 
 
     <br /> 
 
{{user.callMe()}} 
 
</div>

Answer 2

{{user.callMe()}}は、対応するコントローラにラップする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="HelloCtrl"> 
 
    <!--הטופס--> 
 
    First Name: 
 
    <input type="text" ng-model="user.name" /> 
 
    <br />Last Name: 
 
    <input type="text" ng-model="user.nickName" /> 
 
    <br />{{user.callMe()}} 
 
    </div> 
 
</div> 
 

 
<script> 
 
    var myapp = angular.module("myapp", []); 
 
    myapp.controller("HelloCtrl", function($scope) { 
 
    $scope.user = { 
 
     name: "name123", 
 
     nickName: "nickName123", 
 

 
     callMe: function() { 
 
     var userObject = $scope.user; 
 
     return userObject.name + " Known as " + userObject.nickName; 
 
     } 
 
    }; 
 
    }); 
 
</script>

Answer 3

外でした。 js

<div ng-app="myapp"> 
     <div ng-controller="HelloCtrl"> 
      <!--הטופס--> 
      First Name:<input type="text" ng-model="user.name" /> 
      <br /> 
      Last Name:<input type="text" ng-model="user.nickName" /> 
      <br /> 
      {{user.callMe()}} 
     </div> 
    </div> 
    <script src="Scripts/angular.min.js"></script> 
    <script> 
     var myapp = angular.module("myapp", []); 
     myapp.controller("HelloCtrl", function ($scope) { 
      $scope.user = { 
       name: "name123", 
       nickName: "nickName123", 

       callMe: function() { 
        var userObject = $scope.user; 
        return userObject.name + " Known as " + userObject.nickName; 
       } 
      }; 
     }); 
    </script>