如何从我的angular-js指令中单击一个函数?

时间:2016-08-08 15:16:23

标签: javascript html angularjs

我无法想象如何使用ng-click从我的指令中调用函数。

这是我的HTML示例:

 <div>
    <directive-name data="exemple">
        <button class=btn btn-primary type="submit" ng-click="search()">
    </directive-name>
</div>

这是我的javascript的一个例子:

...
.directive('directiveName', ['exempleService', function(exempleService) {
    function link(scope, element, attrs) {

        scope.search = function() {
            console.log("this is working")
        };
    };

    return {
        link: link,
        restrict: 'E',
        scope: {data:'=',
        search:'&'}
    }

}]);

提前致谢! :)

2 个答案:

答案 0 :(得分:1)

您必须创建一个directive,其中包含指令模板中的button(作为HTML或外部文件)。

查看

<div ng-app="app">
  <directive-name data="exemple"></directive-name>
</div>

<强>指令

var app = angular.module('app', [])

app.directive('directiveName', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.search = function() {
        alert('boe');
      }
    },
    template: '<button class=btn btn-primary type="submit" ng-click="search()">CLICK</button>'

  }
})

FIDDLE

答案 1 :(得分:0)

您的按钮应位于指令模板中

.directive('directiveName', ['exempleService', function(exempleService) {
    function link(scope, element, attrs) {

        scope.search = function() {
            console.log("this is working")
        };
    };

    return {
        link: link,
        restrict: 'E',
        template: '<div><button class=btn btn-primary type="submit" ng-click="search()"></div>'
        scope: {data:'=',
        search:'&'}
    }

}]);