javascript - angularjs:指令中的多个绑定(bind)函数

标签 javascript angularjs angularjs-directive angularjs-controller angular-directive

我的指令中有一个函数绑定(bind)到 Controller 中的函数,如下所示:

HTML:

<div graph-visualization data="graphdata" type="graphtype" data-method="watchMonth" timespan="timespan" id="graph" ng-if="!loading">
</div>

指令:

app.directive('graphVisualization', function() {
    return {
        restrict: 'A',
        scope: {
          data: '=',
          type: '=',
          timespan: '=',
          monthFilter: '&method'
        },
        link: function(scope, element, attrs) {
            scope.updateMonth = function() {
                var func = scope.monthFilter();
                func(scope.month)
            }

            scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
                 scope.month = 'something'
                 scope.updateMonth()
            })
})

Controller :

$scope.watchMonth = function(value) {
    //handle value passed from directive
}

如您所见,我的 Controller 中有一个从指令调用的绑定(bind)函数“watchMonth”。 现在,我想在指令中添加另一个函数,该函数绑定(bind)到 Controller 中的某些其他函数。我该怎么办?我似乎无法理解它。

我想要的是我正在处理指令中的点击并根据该点击获取值。现在,我想将此值传递给 Controller ​​,该 Controller 将修改 Controller 中的“graphdata”(我在其中提供了一个监视组)。

最佳答案

在html中添加方法,如下所示: 月过滤器=“watchMonth()”第二功能=“功能()”

请务必在函数名称末尾添加括号

  <div graph-visualization data="graphdata" type="graphtype" month-filter="watchMonth()" second-function="secondFunction()" timespan="timespan" id="graph" ng-if="!loading">

app.directive('graphVisualization', function() {
return {
    restrict: 'A',
    scope: {
      data: '=',
      type: '=',
      timespan: '=',
      monthFilter: '&',
      secondFunction: '&'
    },
    link: function(scope, element, attrs) {
        scope.updateMonth = function() {
            var func = scope.monthFilter();
            func(scope.month)
        }

        scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
             scope.month = 'something'
             scope.updateMonth()
        })

})

添加了一个plunker,也许会有帮助 http://plnkr.co/edit/cISSlQpQF6lFQrDdbTg4?p=preview

关于javascript - angularjs:指令中的多个绑定(bind)函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30976789/

相关文章:

javascript - React Native <ActivityIndi​​cator/> 不可见

javascript - angularjs 将 ngModel 从包装指令传递到包装指令

javascript - Angular Material 使用 $mdDialog 打开下一个对话框的正确方法

javascript - Angular 指令分配具有多种行为的相同范围

javascript - 根据属性中的数据更改指令模板

javascript - Stellar.js 视差元素在 Safari 上抖动?

javascript - 动态复制表单文本区域

javascript - 获取 CPU 温度作为 Node 红色中的数字

javascript - 拥有可以使用 AngularJS 从多个位置触发的动态页脚的最佳方式是什么

angularjs - Uncaught Error : No module: ngRoute