IIFE в AngularJS

Я указал функцию в моем контроллере следующим образом:

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

Я хочу, чтобы эта функция запускалась при изменении selectbox. Поэтому я применяю ng-change к элементу select следующим образом:

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

но я также хочу, чтобы функция myFunction запускалась при загрузке моей страницы. Поэтому я решил превратить свою функцию в жизнь:--5--> 

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

однако теперь функция запускается только на pageload, а не ng-change. Я заметил что когда я меняю скобки, функция также запускается ng-change:

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

может кто-нибудь объяснить, почему это так важно?

большое спасибо!

8
angularjs iife javascript

2 ответов

есть огромная разница между этим

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

и

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

потому что первая строка присваивает результат вызова функции, а затем только сохраняет его, но это не функция, которую она хранит.

второй работает так, как ожидалось, потому что вы вызываете функцию после ее назначения $scope.myFunction

обновление

As helpermethod указано в комментариях, первая строка не является IIFE, потому что вы не вызываете саму функцию, а только ее результат.

9

не видя всего кода, трудно сказать. Вы не используете 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
        }

    }

})();
6