Question

我没有运气弄清楚为什么ng-click没有调用该函数。我正在编译角度模板。我知道我有一个孤立的范围，但应该调用的函数是在指令的范围内...

HTML：

<html ng-app="myMod">
    <head>
    </head>
    <body ng-controller="myController">
        <table>
            <thead><th></th><th>Name</th></thead>
            <tbody>
                <tr ng-repeat="datum in data" my-element person ="datum"></tr>
            </tbody>
        </table>
    <script src="angular.min.js"></script>
    <script src="test.js"></script>
</body>

AngularJS（v1.28）：

angular.module("myMod", []).
    controller("myController",
    function ($scope) {

        $scope.data = [
            { 'name' : 'testA', 'isAdmin': true},
            { 'name' : 'testB', 'isAdmin': false},
            { 'name' : 'testC', 'isAdmin': false},
        ];
}).directive("myElement",function($compile){

    var myTest = function(){
        console.log("table cell clicked!");
    };

    var getTemplate = function(person){
        return '<td><span ng-click="myTest()">{{person.name}}</span></td><td>test2</td>';
    };

return {
        restrict : 'A',
        scope : {
            person : "="
        },
        link : function (scope,element,attrs){

            var template = getTemplate(scope.person);
            element.html(template);
            $compile(element.contents())(scope);
        } 
    };

}）;

Answer 1

它没有工作的原因是你将myTest定义为不在指令范围内的函数，因此视图不知道该函数。

只需将其更改为范围：

return {
        restrict : 'A',
        scope : {
            person : "="
        },
        link : function (scope,element,attrs){

            scope.myTest = function(){
                console.log("table cell clicked!");
            };

            var template = getTemplate();
            element.html(template);
            $compile(element.contents())(scope);


        } 
    };

Fiddle

Answer 2

请查看链接

http://jsfiddle.net/k66Za/103/

我做了必要的更改，代码运行正常。

.directive("myElement",function($compile){
  var getTemplate = function(person){
    return '<td><span ng-click="myTest()">{{person.name}}</span></td><td>test2</td>';
  };

  return {
        restrict : 'A',
        scope : {
            person : "="
        },
        link : function (scope,element,attrs){
          var template = getTemplate(scope.person);
          element.html(template);
          $compile(element.contents())(scope);

       scope.myTest = function(){
        console.log("table cell clicked!");
      };
    } 
  };
});

ng-click in模板未触发

2 个答案: