Question

我有一个指令myEditable，可以将<div>与<input type=text>切换为允许内联版本：

<my-editable value="vm.contact.name"></my-editable>

我很满意，直到我读到一些文章说不应该使用$scope.$apply。我在用户保存更改以更新模型时使用它（在我的情况下为vm.contact.name）：

function save() {
  scope.$apply(function(){
    scope.value = editor.find('input').val();
  });
  toggle();
}

但是因为它是一件坏事，我想将一个回调方法传递给我的指令。当用户保存更改时，必须使用新值调用此回调。但是，我似乎无法在指令范围中添加两个字段：

return {
  restrict: 'EA',
  scope: {
    value: '=value'/*,
    onSave: '&onSave'*/
  },
  link: function(scope, element, attr) {
    // ...
    element.find('.save').click(function(){
      save();
    });

    // Declaration of `save` as above.
  }
}

如果我取消注释onSave，则永远不会收到该值，并且onSave未定义。

我的问题是，如何为指令赋予值和回调方法？并且，作为奖励，我如何将参数传递给回调？

由于

Answer 1

你可以通过＆＃39; n＆＃39;指令隔离范围内的字段数。

如果要传递函数，请使用&。如果您的媒体资源名称为onSave，请记住这一点，然后在视图中使用它on-save。

您的指示应如下所示

app.directive('dir',function(){
  return {
  restrict: 'EA',
  scope: {

    onSave: '&'
  },
  link: function(scope, element, attr) {
    // ...
    debugger
    console.log(scope.onSave)
    scope.onSave();

    // Declaration of `save` as above.
  }
}

})

在视图中，您可以传递如下所示的功能

 <dir on-Save='abc()'/>

OR

 <dir on-save='abc()'/>

AngularJs指令，范围包含值和功能

1 个答案: