Question

我遇到了$ compile的一个问题。我写的代码非常大，因此我创建了一个小例子来复制这个问题。假设我的页面中有一个按钮。当用户点击该按钮时，将创建另一个按钮，该按钮将具有ng-click方法，如下所示：

$scope.showAlert = function(){
       alert('pass'); 
    }
    $scope.createExample = function() {
          var button = '<button type="button" ng-click="' + $scope.showAlert + '()">click</button>';
          angular.element(document.body).append($compile(button)($scope));
    }

HTML：<button type="button" ng-click="createExample()">test</button>

当用户点击按钮时，将调用createExample（）方法。此方法将创建另一个按钮，该按钮将具有ng-click。此ng-clicks包含一个提供警报的方法。

我收到以下错误：

Error: Syntax Error: Token '{' is an unexpected token at column 12 of the expression [function (){
       alert('pass'); 
    }()] starting at [{
       alert('pass'); 
    }()].
    at Error (native)
    at throwError (https://code.angularjs.org/angular-1.0.1.js:5830:11)
    at parser (https://code.angularjs.org/angular-1.0.1.js:5824:5)
    at https://code.angularjs.org/angular-1.0.1.js:6387:29
    at https://code.angularjs.org/angular-1.0.1.js:12493:18
    at nodeLinkFn (https://code.angularjs.org/angular-1.0.1.js:4223:13)
    at compositeLinkFn (https://code.angularjs.org/angular-1.0.1.js:3838:14)
    at https://code.angularjs.org/angular-1.0.1.js:3750:30
    at Object.$scope.createExample (http://fiddle.jshell.net/JKBbV/751/show/:44:65)
    at https://code.angularjs.org/angular-1.0.1.js:6129:19 <button type="button" ng-click="function (){
       alert('pass'); 
    }()" class="ng-scope">

$ compile是我唯一的选择。如何使这项工作？

JSFiddle here

Answer 1

ng-click执行处理程序名称，此处您正在评估方法内容。

正确的代码就是：

    $scope.showAlert = function(){
       alert('pass'); 
    }
    $scope.createExample = function() {
          var button = '<button type="button" ng-click="showAlert()">click</button>';
          angular.element(document.body).append($compile(button)($scope));
    }

$ compile包含函数作为属性值

1 个答案: