NG-单击模板时使用的约束NG-绑定HTML的不安全不工作绑定、不安全、单击、模板
为什么下面输入按钮不叫登录（） InitCtrl 控制器内部功能？
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>
这是 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;
});
}
和问题这是行不通的提琴手版本 http://jsfiddle.net/pooyaho/M8krc / 4 /
And this is not working fiddler version of the problem http://jsfiddle.net/pooyaho/M8krc/4/
推荐答案
我们希望与插入HTML纳克绑定HTML的不安全因此， NG-点击不起作用。为了使它工作，我们需要的编译的这个源使用 $编译服务。
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.
所以，让我们创建compilator
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>';
};
});
，最后让我们的指令添加到HTML：
And at last let's add our directive to HTML:
<div compile-data template="{{mainPage}}"></div>
当然，我们需要在控制器上注册我们的工厂和指令：
$scope.mainPage= tempService();
您可以在这里找到工作的例子： FIDDLE
You can find working example here: FIDDLE
