2014-09-03 30 views
8

我指定的函数在我的控制器是这样的:IIFE在AngularJS

$scope.myFunction = function(){ console.log('test'); } 

我要当一个选择框已被更改为触发该功能。所以我申请这样的选择元素NG-变化:

<select ng-options="..." ng-model="..." ng-change="myFunction();"></select> 

但我也想被载入我的网页时触发myFunction的功能。所以我想把我的功能变成一个IIFE:

($scope.myFunction = function(){ console.log('test'); }()); 

但是,现在该功能只在pageload而不是ng-change触发。 我注意到,当我改变了括号,功能也得到由NG-变化触发:

($scope.myFunction = function(){ console.log('test'); })(); 

有人可以解释为什么这甚至事项?

非常感谢!

+2

第一次调用不是IIFE,第二个是。 – helpermethod 2014-09-03 13:03:33

+0

@helpermethod根据这篇文章http://benalman.com/news/2010/11/immediately-invoked-function-expression/,这两个版本都是IIFE,略有不同'这样的parens通常表明函数表达式将立即被调用,变量将包含函数的结果,而不是函数本身。这可以节省读取你的代码的人不得不向下滚动到可能是一个很长的函数表达式的底部,以查看它是否被调用。“ – Alex 2014-09-03 14:48:29

回答

9

有此

($scope.myFunction = function(){ console.log('test'); }()); 

($scope.myFunction = function(){ console.log('test'); })(); 

之间的巨大差异,因为第一行分配函数调用的结果,然后只将其存储,但它不是一个函数它存储。

预期,因为你已经调用它分配给$scope.myFunction

UPDATE

由于helpermethod在评论中指出后,函数的第二个作品中,第一行是不是IIFE,因为你不是调用函数本身,而只是调用函数的结果。

+0

好吧,我现在明白了。我之所以做前者是因为JSLint抱怨函数的“错误调用”。 – PhillSlevin 2014-09-03 13:36:12

5

没有看到所有的代码,很难说。您没有使用IIFE,您正在执行自己的函数并将其设置为$ scope变量。另外,IIFE不会在页面加载时运行。与其试图纠正所有这些,尝试使用更像下面的例子的代码。

尝试创建在IIFE控制器和更新HTML这样的:

<div ng-controller="MyCtrl as vm"> 
    <select ng-options="vm.someOptions" 
     ng-model="vm.someModel" 
     ng-change="vm.myFunction()"></select> 
</div> 

和控制器

(function(){ 
    angular.module('myapp').controller('MyCtrl', MyCtrl); 

    function MyCtrl() { 
     var vm = this; 

     vm.someModel; 
     vm.someOptions = []; // set these 
     vm.myFunction = myFunction; 

     activate(); 

     function activate() { 
      myFunction(); 
     } 

     function myFunction() { 
      // TODO: will be called onchange and 
      // when controller starts 
     } 

    } 

})();