Geek Answers Handbook

Ng-click does not work when the linked template uses ng-bind-html-unsafe

Why don't the enter buttons below call a function login()inside the controller InitCtrl?

<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 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 does not work the fiddler version of the problem http://jsfiddle.net/pooyaho/M8krc/4/

0
source share
2 answers

We want to embed HTML with ng-bind-html-unsafe, therefore it ng-clickdoes not work. For it to work, we need to compile this source using the service $compile.

So, let's create a “compiler”:

.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, create a dummy factorythat mimics a response from the 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 finally, add our directive in HTML:

 <div compile-data template="{{mainPage}}"></div>

, factory directive:

$scope.mainPage= tempService();

: FIDDLE

+3

ng-bind-html-unsafe angular -js , .

+1

More articles:


All Articles