dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Why is IIFE Breaking My Angular App?

  1. #1
    Join Date
    Jan 2016
    Posts
    13

    Question Why is IIFE Breaking My Angular App?

    Hi. I have a basic app in jsfiddle that uses a controller to do things when the radio buttons are clicked (show the message when the last one is clicked). It is working in this example:

    jsfiddle.net/Jim01/wepLp6vj/2/

    But then I wrap the controller in an IIFE as the style guide says. When I do this the message that should be hidden is shown:


    jsfiddle.net/Jim01/wepLp6vj/3/

    Why is this happening? What I am doing wrong that the IIFE is breaking the app?
    thanks,
    jsJim

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,666
    Hi there jsJim,

    there are two errors when using "IIFE".

    This...
    Code:
    
        messageVisible = false
    ...should be...
    Code:
    
        var messageVisible = false;
    And this...
    Code:
    
        })
    ...should be...
    Code:
    
        })();
    So...
    Code:
    
    <script>
    /**
     * Created by jsJim 1/30/16
     */
     
    (function(){
    'use strict';
    
       var myApp = angular.module('JimApp', []);
    
    myApp.controller('JimController', ['$scope', function($scope) {
      console.log("Controller started.");
      $scope.jimCoolSelection = "yes";
      $scope.errorVisible = "true";
      var messageVisible = false;
    
      $scope.onNoRadioButtonClicked = function(noSelected) {
        $scope.errorVisible = true;
        console.log("BUTTON CLICKED" + document.getElementById('noRadioButton'));
        document.getElementById('noRadioButton').checked = false;
      };
      $scope.onFirstRadioButtonClicked = function(noSelected) {
        $scope.errorVisible = false;
      };
      $scope.onFirstRadioButtonInit = function() {
        console.log("Hi from first radio button." + document.getElementById('firstRadioButton'));
        document.getElementById('firstRadioButton').checked = true;
        $scope.errorVisible = false;
      };
      $scope.setErrorInvisible = function() {
        console.log("Setting serror message invisible.");
        $scope.errorVisible = false;
        messageVisible = false;
      };
    }]);
    })(); 
    </script>
    Note:-

    I have not addressed you HTML errors though.

    Code:
    
    
    25	79	Attribute “ng-app” not allowed on element “div” at this point.
    25	79	Attribute “ng-controller” not allowed on element “div” at this point.
    29	125	Attribute “ng-click” not allowed on element “input” at this point.
    32	114	Attribute “ng-click” not allowed on element “input” at this point.
    35	141	Duplicate attribute “ng-model”.
    35	195	Attribute “ng-model” not allowed on element “input” at this point.
    35	195	Attribute “ng-click” not allowed on element “input” at this point.
    35	195	Attribute “ng-init” not allowed on element “input” at this point.
    39	122	Attribute “name” not allowed on element “div” at this point.
    39	122	Attribute “ng-show” not allowed on element “div” at this point.
    39	122	Attribute “ng-init” not allowed on element “div” at this point.
    
    11 errors; https://validator.nu/ 189 ms
    

    coothead
    Last edited by coothead; 01-30-2016 at 03:54 PM. Reason: added HTML errors
    ~ the original bald headed old fart ~

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles