Why below input button do not call login() function inside InitCtrl controller?
<html lang="en" ng-app="mvc-module" class="ng-scope"><head>
<meta charset="utf-8">
<title>Sign in</title>
<script src="/SpringMVC/static/todo.js"></script>
</head>
<body>
<div ng-controller="InitCtrl" ng-bind-html-unsafe="mainPage" class="ng-scope ng-binding">
<!------ this part of code is injected by binding model of Angularjs -->
<div class="container">
<input type="button" ng-click="login()" value="Sign in" class="btn btn-large btn-primary">
</div>
<!--- end of injection --->
</div>
</body></html>
and this is todo.js :
function InitCtrl($scope, $http) {
$scope.login = function () {
console.log("In login!");
$http.post("login", {password: $scope.password, username: $scope.username}).
success(function (data, status, headers, config) {
$scope.mainPage = data;
console.log("successfully logged to login");
}).error(function (data, status, headers, config) {
console.log("error in post");
});
};
$http.get("login").success(function (data, status, headers, config) {
$scope.mainPage = data;
});
}
And this is not working fiddler version of the problem http://jsfiddle.net/pooyaho/M8krc/4/
We want to insert HTML with ng-bind-html-unsafe therefore ng-click doesn't work. To make it work we need to compile this source by using $compile service.
So lets create "compilator":
.directive( 'compileData', function ( $compile ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
var elmnt;
attrs.$observe( 'template', function ( myTemplate ) {
if ( angular.isDefined( myTemplate ) ) {
// compile the provided template against the current scope
elmnt = $compile( myTemplate )( scope );
element.html(""); // dummy "clear"
element.append( elmnt );
}
});
}
};
});
after, let's create dummy factory that simulates response from server:
.factory( 'tempService', function () {
return function () {
// $http.post("login", {password: $scope.password, username: $scope.username}).
// success(function (data, status, headers, config) {
//
// console.log("successfully logged to login");
// return data;
// }).error(function (data, status, headers, config) {
// console.log("error in post");
// return "error";
// });
// obviously would be $http
return '<form class= "form-signin" >' +
'<h2 class="form-signin-heading">Please sign in</h2>' +
'<input type = "text" class= "input-block-level" placeholder = "User name" ng-model = "username" >' +
'<input type="password" class="input-block-level" placeholder="Password" ng-model="password">' +
'<label class="checkbox">' +
'<input type="checkbox" value="remember-me" ng-model="remember"> Remember me' +
'</label>' +
'<input type="button" class="btn btn-large btn-primary" ng-click="login()" value="Sign in">' +
'</form>';
};
});
And at last let's add our directive to HTML:
<div compile-data template="{{mainPage}}"></div>
For sure, we need to register in controller our factory and directive:
$scope.mainPage= tempService();
You can find working example here: FIDDLE
ng-bind-html-unsafe is removed in newer versions of angular-js and will throw an error if you use it.
