Reputation: 3
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:
Upvotes: 0
Views: 174
Reputation: 395
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>
Upvotes: 0
Reputation: 16876
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>
Upvotes: 0
Reputation: 7117
{{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>
Upvotes: 1