AngularJS中的IIFE

Question

我在我的控制器中指定了一个函数,如下所示:

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

我希望在更改选择框时触发此功能.因此,我对select元素应用ng-change,如下所示:

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

但我也想在我的页面加载时触发myFunction函数.所以我想把我的功能变成IIFE:

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

但是,现在该功能仅在页面加载时触发,而不是由ng-change触发.我注意到当我更改括号时,该函数也会被ng-change触发:

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

有人可以解释为什么这甚至重要吗？

非常感谢!

Answer 1

这有很大的不同

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

还有这个

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

因为第一行分配函数调用的结果,然后只存储它,但它不是它存储的函数.

第二个按预期工作,因为您在分配函数后调用该函数 $scope.myFunction

UPDATE

正如helpermethod在评论中指出的那样,第一行不是IIFE,因为你不是在调用函数本身,而只是调用它的结果.

Answer 2

没有看到你的所有代码,很难说.您没有使用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
        }

    }

})();