Using 'Ng-If' "breaks" program on a $('#x').change or an angularfire $add

Question

I've noticed two instances in my code where using ng-if causes my program to start working. On one, I do an ng-if="isOwnProfile", for an image-upload toolbar.

Using the ng-if causes the event listener to stop working. Code example:

   $scope.myOwnProfile = false;
   if (userLoggedIn === userUID) {
     console.log('my images');
     $scope.myOwnProfile = true;
   } else {
     console.log('not my images');
   }
    $("#image-upload").change(function(e) {
    $scope.myOwnProfile = true;
    var file = e.target.files[0];
    var imageRef = firebase.storage().ref...

and in HTML:

<section ng-if="myOwnProfile">
   <input id="image-upload" type="file" accept="image/*"> <br /><br />
</section>

In this case the event listener will stop working and not respond. Another case is where you add a message to the page (and firebase). Code:

    $scope.addMessage = function(){
    var date = new Date();
    $scope.messages.$add({
        timestamp: (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(),
        from: $scope.visitorRealName.name,
        content: $scope.message
    });
    $scope.message = '';
};

HTML:

    <section ng-if="AreWeFriends === true || myOwnProfile === true">

    <form ng-submit="addMessage()">
        <input ng-model="message"> 
        <button type="submit">Add Message</button>
    </form>

    </section>

In the second case I get an error from Firebase "Key content was undefined. Cannot pass undefined in JSON. Use null instead".

I can't determine why using ng-if causes this to happen? What I do is set the user's profile to true whether they are a) a friend or b) it's the person's own profile (which is why I change $scope).

Answer 1

That's because the ngIf directive creates it's own child scope.

The ngIf directive creates it's own scope, so the ngModel directive containing message is set on the scope created by the ngIf directive, not your controller.

When you access the value in your controller it's not there, so it's undefined. You are essentially passing undefined to your content key inside your object you're adding to your messages so Firebase complains.

To fix it i'd recommend using the controller as syntax so that you can reference the controller, or use the ngShow directive, which doesn't create it's own child scope.

Here are a few examples of what happens:

(function() {

  'use strict';

  angular.module('app', []);

})();

(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['$scope'];

  function MainController($scope) {

    var vm = this;

    $scope.test1 = test1;
    $scope.test2 = test2;
    $scope.test3 = test3;
    $scope.test4 = test4;

    function test1() {

      // this is undefined because there is no property `message` 
      // on the $scope of this controller
      alert($scope.message);

    }

    function test2() {

      // this contains the value binded to the message property 
      // of this controller because we used the controller as syntax
      alert(vm.message);

    }
    
    function test3(message) {

      // because we are passing in the message value we can
      // access it without caring where it came from
      alert(message);

    }
    
    function test4() {

      // the property `message` exists on this $scope because we
      // used the ngShow directive instead of the ngIf
      alert($scope.message4);

    }

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="MainController as MainCtrl">

  <h4>Without controller as syntax</h4>
  <p>Does not work because message is not set on the controller's $scope, it's set on the scope created by the ngIf directive</p>
  <form ng-if="true">
    <input ng-model="message">
    <button ng-click="test1()">Submit</button>
  </form>
  
  <hr>

  <h4>With controller as syntax</h4>
  <p>Works because message is set on the controller so we can access it using `this` in our MainController</p>
  <form ng-if="true">
    <input ng-model="MainCtrl.message">
    <button ng-click="test2()">Submit</button>
  </form>

  <hr>
  
  <h4>Without controller as syntax but passing the message value into our function</h4>
  <p>Works because although message is set on the scope created by the ngIf directive, we are passing it to test3 in our MainController.</p>
  <form ng-if="true">
    <input ng-model="message">
    <button ng-click="test3(message)">Submit</button>
  </form>
  
  <hr>
  
  <h4>With ngShow directive instead of ngIf</h4>
  <p>Works because message is set on $scope from our contoller</p>
  <form ng-show="true">
    <input ng-model="message4">
    <button ng-click="test4()">Submit</button>
  </form>

</div>