从指令传递参数到控制器函数

Question

我看到很多这样的问题，但没有找到可行的解决方案。这里有一个 fiddle，它不起作用，但应该可以。

http://jsfiddle.net/cdparmeter/j2K7N/2/

控制器：

$scope.foo = function (textArray) {
    console.log(textArray)
};

指令：

return {
    restrict: 'E',
    replace: 'true',
    scope: {
        methodToCall: '&method'
    },
    template: "<div>
        <input ng-model='textToPush'/>
        <button ng-click='pushText'>Push</button>
        <button ng-click='finish'>Finish</button>
    </div>",
    link: function (scope, element, attrs) {
        scope.paragraphs = [];
        scope.pushText = function () {
            scope.paragraphs.push(scope.pushText);
            scope.pushText = "";
        }
        scope.finish = function () {
            scope.methodToCall(scope.paragraphs)
        }
    }
}

HTML:

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <container data-method="foo">
    </div>
</div>

我在指令中创建了一个需要在父级作用域的控制器中进行自定义处理的数组。我知道我可以在父级作用域上抛出一个监视器，监视我传递到指令中的模型，但那似乎很笨拙和不干净。您有什么建议吗？

- C-Rad

Answer 1

在回答您的问题之前，我必须说一下，您的脚本包含一些错误：

1. 您将输入绑定到名为textToPush的变量中，然后在pushText函数内使用不同的变量(pushText)；
2. 您没有正确设置ng-click指令；它应该是ng-click="pushText()"而不是ng-click="pushText"。对于finish也是如此；

现在，回到您的问题。为了调用父作用域的一个带参数的函数，您需要先获取对该函数的引用，然后执行它：

scope.finish = function () {
  var func = scope.methodToCall();                
  func(scope.paragraphs);
}

这是您脚本的工作版本。

如果您愿意，也可以选择这样做：

scope.finish = function () {
    scope.methodToCall({value: scope.paragraphs});                                
}

但是，为了使此代码起作用，您需要更改标记：

<container data-method="foo(value)"/>

这里有一个 另一个 jsFiddle，展示了上面的解决方案。

- Michael Benford