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

后调用该函数

<强>更新

正如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
        }

    }

})();

AngularJS中的IIFE

2 个答案: