使用 ng-bind-html-unsafe 绑定模板时，ng-click 不起作用答案

【问题标题】：ng-click do not work when a template bound using ng-bind-html-unsafe使用 ng-bind-html-unsafe 绑定模板时，ng-click 不起作用
【发布时间】：2013-09-30 14:03:28
【问题描述】：

为什么下面的输入按钮不调用InitCtrl控制器内部的login()函数？

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

【问题讨论】：

可能是因为您没有重新编译它。你能做一个jsfiddle吗？
@EduardGamonal 服务器端程序是 Spring MVC，如何在 jsfiddle 中部署？
你在哪里加载角度组件？
@Пуя 硬编码...
@Пуя 抱歉耽搁了，我解决了你的问题，你还需要答案吗？

标签： javascript html angularjs

【解决方案1】：

我们想插入带有ng-bind-html-unsafe 的HTML，因此ng-click 不起作用。为了使它工作，我们需要使用$compile 服务编译这个源代码。

让我们创建“编译器”：

.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 );
        }
      });
    }
  };
});

之后，让我们创建一个虚拟的factory 来模拟来自服务器的响应：

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

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

当然，我们需要在控制器中注册我们的factory 和directive：

$scope.mainPage= tempService();

您可以在此处找到工作示例：FIDDLE

【讨论】：

是的，它在主 div 中加载登录页面。看看我的示例网址
太棒了，谢谢分享！是否也可以在模板内的<script> 标签中添加额外的控制器和指令？
当然，既然你编译了它，你就可以定义一切。
你能帮我解决这个问题吗？我认为我的问题是，在评估 <script> 标记之前编译了 html。所以我在<script>标签内定义的控制器当时没有定义。
@Felix 抱歉，它不是指当前的问题/答案。请打开新问题

【解决方案2】：

ng-bind-html-unsafe 在较新版本的 angular-js 中被删除，如果你使用它会抛出错误。

【讨论】：