8

我见过很多这样的问题，但还没有找到有效的解决方案。这是一个不起作用但应该起作用的小提琴。

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>

我正在我的指令中构建一个数组，该数组需要在父范围的控制器中进行自定义处理。我知道我可以在传递给我的指令的模型的父作用域中放置一个手表，但这看起来很笨拙和肮脏。有什么建议么？

4

1 回答 1

13

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

  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 。

于 2013-10-03T03:44:20.757 回答