Javascript “我的”按钮出现，但不'；t触发函数

我知道这个问题似乎是反复出现的，但我还没有在其他主题中找到答案

所以，我知道我有一个问题，我的第一个按钮似乎没有触发功能时点击

我有点不好意思问这个问题，因为把一个按钮链接到一个函数似乎太新了，但是。。。你能帮我吗

我的代码：

index.html：

...
    <div>
        <validate-bill/>
    </div>
...

services.js

    app.factory('billData', function() {

    return {

        billOne: {
            entityName: 'entity',
            clientName: 'client',
            products: [
                {"name":"p1","price":50},
                {"name":"p2","price":150},
                {"name":"p3","price":120},
                {"name":"p4","price":50}
            ],
            email: 'foo@bar.com',
            status : false
        }
    }

});

app.factory('billChecker',function () {
    return{
        validateBill:function()
        {
            alert("Im here ");
        }
    }
});

---

首先，在使用自定义元素指令时，应始终使用第二个标记关闭标记，即

<my-custom-tag></my-custom-tag>

不是

因为很多浏览器无法识别第二件事

现在讨论您的问题，在指令“validateBill”中调用的任何函数都将在该指令的控制器中查找它们的定义。这意味着，如果要从指令内调用函数，必须定义一个控制器，该控制器包含链接到指令作用域的所述函数。示例如下：

app.directive('validateBill', function() {
    return{
        restrict : 'E',
        template : "<button ng-click='checkBill()'>Valider</button>",
        controller : function($scope) {
            $scope.checkBill = function() {....};
        }
    };

});

app.directive('validateBill', function() {
    return{
        restrict : 'E',
        scope : {callback : '&'}
        template : "<button ng-click='checkBill()'>Valider</button>",
        controller : function($scope) {
            $scope.checkBill = function() {$scope.callback()()};
        }
    };

});

app.directive（'validateBill'，function（）{
返回{
限制：'E'，
模板：“Valider”，
控制器：功能（$scope）{
$scope.checkBill=function（）{….}；
}
};
});

现在，如果希望在该指令中调用的函数调用主应用程序控制器中的某些内容，则必须使用指令中的scope属性在回调中将指令传递给其作用域。示例如下：

app.directive('validateBill', function() {
    return{
        restrict : 'E',
        template : "<button ng-click='checkBill()'>Valider</button>",
        controller : function($scope) {
            $scope.checkBill = function() {....};
        }
    };

});

app.directive('validateBill', function() {
    return{
        restrict : 'E',
        scope : {callback : '&'}
        template : "<button ng-click='checkBill()'>Valider</button>",
        controller : function($scope) {
            $scope.checkBill = function() {$scope.callback()()};
        }
    };

});

app.directive（'validateBill'，function（）{
返回{
限制：'E'，
作用域：{回调：'&'}
模板：“Valider”，
控制器：功能（$scope）{
$scope.checkBill=function（）{$scope.callback（）（）}；
}
};
});

来自主html的用法：

<validate-bill callback="MainCtrl.checkBill"></validate-bill>

TLDR：创建自定义指令也会创建一个单独的作用域，在该指令中调用的函数将在其中查找它们的定义。如果希望调用父作用域中的方法，最好将这些方法作为属性传递给指令，因为从长远来看，这将使应用程序更加模块化

---

我强烈建议阅读本文（）作为使用angularJS进行绑定和回调的解释

你能用这个例子提供一个plunker吗？浏览器控制台中有错误吗？因为你上面的代码似乎是正确的。@geo这里是一个plunker，代码来自原始问题，因此没有上面的帮助：

<validate-bill callback="MainCtrl.checkBill"></validate-bill>