$ Scope Problem in eckigen

Question

Ich sah bereits viele Fragen zu diesem Thema, aber ich habe die Antworten nicht verstanden, die gegeben wurden. Ich habe einige Beispiele für Module und Controller gesehen, aber wenn ich es versuche, funktioniert es nicht.

Ich kopierte Code von einer Website, um zu überprüfen, ob es für mich funktioniert, aber es funktioniert immer noch nicht.

Dies ist der Code:

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()}}

Wenn ich den Code debuggen das ist, was ich bekommen:

Answer 1

Ihre Angular Interpolation war vor der Angular App ;-)

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()}} sollte in den entsprechenden Controller gewickelt werden .

<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

Ihre Interpolation innerhalb Controller div sein sollte und der Bezug auf Winkel hinzufügen. 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>