Javascript 未从指令模板调用的单击函数

我是Angular方面的初学者，我试图理解为什么在某些情况下，我的ng点击不起作用取决于上下文。 首先，这是我的代码，然后我将尝试更精确地描述我的问题

HTML:

<div ng-app='myApp'>
   <section id="map-orders" ng-controller="ProductsController as products">
      <div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
         <div class="product">
            <h3> {{products.name}} </h3>
            <span ng-click="remove($index)">Remove</span>
         </div>
      </div>
   </section>
</div>

所以这个代码是有效的。但当我通过添加指令对其进行转换时： HTML:

将本指令添加到原始js中：

app.directive('product', function() {
    var tpl = '<div class="product">' +
    '<h3 {{products.name}} </h3>' +
    '<span ng-click="remove($index)">Remove</span>'
    '</div>';
    return {
        restrict: 'E',
    template: tpl,
    };
});

app.directive（'product'，function（）{
var tpl=“”+
“因为使用了controllerAs语法，所以需要在模板中为函数
remove
指定别名

现场示范


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
此项。产品=[{
姓名：“亚历克斯”，
}, {
姓名：“山姆”
}];
this.remove=函数（索引）{
本标准。产品。拼接（索引，1）；
}
})
.指令（“产品”，功能（）{
var tpl=“”+
“{{product.name}}”+
“删除”
'';
返回{
限制：'E'，
模板：第三方物流，
链接：功能（范围）{
console.log（范围）；
}
};
})；

这里您的指令只使用了与
产品控制器
相同的范围。因此可以使用
产品调用
产品控制器
中的remove方法。remove（$index）
由于您在html中指定控制器时遵循了作为控制器的
语法
您需要在指令范围内创建删除函数OK，谢谢您的回答。是否有方法从指令范围内调用删除函数（控制器）？
<div ng-app='myApp'>
   <section id="map-orders" ng-controller="ProductsController as products">
      <div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
         <product></product>
      </div>
   </section>
</div>

app.directive('product', function() {
    var tpl = '<div class="product">' +
    '<h3 {{products.name}} </h3>' +
    '<span ng-click="remove($index)">Remove</span>'
    '</div>';
    return {
        restrict: 'E',
    template: tpl,
    };
});