Question

有人在项目中创建了自定义标记，例如

<mytable config='{head:[title1, title2],data:[[col1, col2]]}'></mytable> ，

上面的代码会在页面加载后生成一个表格。

我想在表格中创建一个按钮，然后插入字符串：

'<button class="btn btn-primary" ng-click="lookup(3)">lookup</button>';

但是ng-click不起作用。我写了一个简单的代码来模仿它：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script type="text/javascript" src="/javascripts/jquery.min.js"></script>
        <script type="text/javascript" src="/javascripts/angular/1.4.0/angular.min.js"></script>
        <script>
            var create = function () {
                $('#template').html('<button ng-click="changeName()">click me</button>')
            }
        </script>
    </head>
    <body ng-controller="myCtrl">
        <span>{{name}}</span>
        <div id="template"></div>
        <button onclick="create()">create</button>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.name = "John";
                $scope.changeName = function () {
                    $scope.name = "Jack";
                    alert("success");
                }
            });
        </script>
    </body>
</html>

我已经google了，发现angular应该编译新创建的元素，但我不知道如何在这种情况下

Answer 1

您需要$compile服务。

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $compile) {

        $scope.create = function () {
               $compile($('#template').html('<button ng-click="changeName()">click me</button>'))($scope);
        }
               $scope.name = "John";
               $scope.changeName = function () {
                  $scope.name = "Jack";
                  alert("success");
               }
     });

并将您的HTML更改为

<button ng-click="create()">create</button>

或者你可以获得所有身体，然后致电$compile

var body = $angular.element(document).find('body');
$compile(body)($scope);

Answer 2

您应该使用 ng-repeat 来创建这些按钮，而不是jQuery。

然后angular会自动将 ng - 绑定到这个新元素。

如何为Jquery创建的元素添加angular的ng-click？

2 个答案: