Angularjs指令呼叫控制器功能

Question

我有一个指令，呈现一个长列表。渲染工作相当精细和快速，现在我想用参数调用控制器上的函数。 我怎样才能做到这一点？

这里是我的指令：

.directive("slheats", function() { 
return { 
    restrict: "A", 
    scope: { 
     slheats: "=", 
    }, 
    link: function (scope, element, attrs) { 
     scope.$watch("slheats", function (data) { 
      angular.forEach(data, function (heat, h) { 
       var body = ""; 
       var first = true; 
       var ct = 1; 
       body += "<div class='row heat'>" + heat.Heat + "</div>"; 
       angular.forEach(heat.Entries, function (entry, e) { 
        var line = ""; 
        ct++; 

        line += "<div class='name'><button ng-click='showdetails()'>" + entry.Name + "</button></div>"; 

        body += line; 
       }); 
       $(element).append(body); 
      }); 
     }); 
    } 
} 

}）

.controller('startlistcontroller',['$scope', 'apiservice', 'objectservice', function ($scope, apiservice, objectservice) { 
$scope.startlists = []; 
$scope.selected = null; 


$scope.showdetails = function (x) { 
    alert(x); 
}; 

我怎么能说我的控制器的showdetails功能？

谢谢曼纽尔！

Answer 1

假设您所指的控制器具有指令的父范围，您需要使用角度的范围函数表达式绑定来绑定函数。参见＃8 here。因此，它可能看起来像：

.directive("slheats", function() { 
    return { 
    ... 
    scope: { 
     slheats: "=", 
     internalShowdetails: "&" 
    }, 
    link: function (scope, element, attrs) { 
     .... 
     line += "<div class='name'><button ng-click='internalShowdetails()'>" + entry.Name + "</button></div>"; 
     .... 
    } 
}); 

然后在您的html：

<div slheats="something" internal-show-details="showdetails(a, b, c)"></div> 

序号：http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

更新：

所以上面会按预期工作提供您正在使用指令上的template(Url)属性，但是如果您正在呈现html在你的link函数中，因为OP正在这样做，所以需要首先编译$compile。这是一个plnkr显示如何工作。