回调和AngularJS(ng-click)

时间:2013-12-17 20:10:11

标签: javascript angularjs

我有一个像

这样的按钮
<div class="button" ng-repeat="event in events" 
    ng-click="selectEvent($index, event, generate)">
 Content
</div>

其中generate应该是回调函数,但由于某种原因,它在调用时是未定义的。

就像有人点击按钮一样,我明白了 TypeError: undefined is not a function。我的selectEvent()代码看起来像

$scope.selectEvent = function ($index, event, callback) {
    // Do some stuff with $index and event

    console.log(callback); // This is undefined
    callback($scope, $http);
};

和函数generate()在JS文件的某处定义。

3 个答案:

答案 0 :(得分:5)

前言:@MaximShoustin的回答是正确。但是,我不确定它是否解决了这里发生的一些其他问题。

另外,我不希望这听起来有点居高临下,这只是建设性的批评。拿走或离开它。

回调的接线应该由您的控制器完成,而不是您的视图。

为什么?

  1. 如果您的视图连接回调,则很难测试控制器。
  2. 这是“商业逻辑”。
  3. 视图应该只关注显示事物和连接事件。
  4. 您似乎正在尝试在视图中连接业务逻辑。换句话说,你说“当你点击这个东西时,调用这个函数,然后在你完成时调用另一个函数”。

    $scope.doSomething = function($index, event) {
        //do stuff
        $scope.generate();
    };
    
    $scope.generate = function (){
        //more stuff.
    };
    

    为什么要将控制器范围的变量传递给由事件绑定中的计算表达式传递给函数的函数?似乎很复杂。

    我正在具体谈到这一行:

    callback($scope, $http);
    

    这里的目的是什么?对于每个事件,“生成”是否会有所不同?为什么必须将$scope$http传递给它?您应该可以访问整个控制器功能。

    好像你想在这里做一些疯狂的事情。也许我不明白你想要解决的问题。

答案 1 :(得分:3)

听起来像Angular没有看到generate回调。确保它定义为控制器,如:

$scope.generate = function(){/**/} 

$scope.generate = function(){
    generate();// if it defined out of scope 
} 

$scope.generate = generate;

答案 2 :(得分:1)

要使其正常工作,generate必须在范围内。 Angular模板需要能够看到它。因此,您可以在控制器中定义它:

$scope.generate = generate;

这将分配您当前的生成函数对Angular可见。