Shira Forkosh Shira Forkosh - 3 months ago 9
HTML Question

$scope issue in angular

i already saw many question about this issue, but i didn't understand the andswers that was given. I strat learng angular yesterday. I saw sevreal exapmles of modules and controllers but when i try it, it is not workoing.
I copied code from website to check if it will work to me but it still not working.
this is the code:

enter code here


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


when i debug the code this is what i get:
THE HTML PAGE

Answer

Your Angular Interpolation was outside your 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>

Comments