未调用AngularJS Custom Directive回调

时间:2013-12-06 04:57:02

标签: angularjs

我基本上创建了一个自定义指令,用于更新ngModel属性并调用回调。

但是没有调用回调。我认为这是因为该指令使用的是隔离范围?

http://jsfiddle.net/KzMvR/9/

<div ng-controller="MyCtrl">
  <div ng-repeat="row in data">
    {{row.name}} {{row.email}}
    <button load load-callback="callback(row);"
            ng-model="row">Load</button>
  </div>
</div>

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

app.directive('load', ['$parse', function ($parse) {
  return {
    scope: {
      ngModel: '='
    },
    link: function (scope, element, attrs) {
      var callback = $parse(attrs.loadCallback);

      element.bind("click", function () {
        scope.ngModel = {
          name: 'martin',
          email: 'martin@test.com'
        };
        callback(scope);  // calls callback
      });
    }
  }
}]);

function MyCtrl($scope) {
  $scope.data = [
    {
      name: 'john',
      email: 'john@doe.com'
    },
    {
      name: 'ben',
      email: 'ben@test.com'
    }
  ];

  $scope.callback = function (data) {
    console.log(data + ' from callback1');
  };
}

1 个答案:

答案 0 :(得分:0)

是的,您需要使用&表示法传递回调函数,并使用callback({data:scope})进行调用。

查看更新的小提琴

http://jsfiddle.net/qLELn/

问题: 为什么不使用ng-click并在点击事件上进行自定义绑定。

为什么要通过完整的范围?

更新:根据您的反馈,这里是更新模型的更新小提琴

http://jsfiddle.net/qLELn/2/