$scope issue in angular

Question

I already saw many questions about this issue, but I didn't understand the answers that were given. I saw several examples of modules and controllers but when I try it, it is not working.

I copied code from a website to check if it will work for me but it is still not working.

This is the 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()}}

When I debug the code this is what I get:

Have you actually included Angular JS anywhere in your HTML? — Ankh
– Ankh, Commented Aug 9, 2016 at 15:14

Sankar · Accepted Answer · 2016-08-09 15:16:26Z

{{user.callMe()}} should be wrapped into the corresponding controller.

<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>

Sebastian Sebald · Accepted Answer · 2016-08-09 15:17:43Z

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>

Amit · Accepted Answer · 2016-08-09 15:41:55Z

Your interpolation should be inside controller div and add reference to angular.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>

Collectives™ on Stack Overflow

$scope issue in angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related