如果在ng-if中使用，则集合不起作用，但与ng-show一起使用

Question

I just upgraded Angular from 1.4.8 to 1.6.4 in my application and I am facing an issue with a select menu that gets the data from a controller variable.

html:

<div id='main_app_header' ng-if="ctrl.shouldShowHeader">
  <accounts-directive></accounts-directive>
</div>

The accounts directive has the select menu.

<div class="account-selector" ng-class="{'account-selector-disabled': haCtrl.accounts.length == 1}">
  <select id="account-select" ng-model="haCtrl.current"
      ng-options="account as account.name for account in haCtrl.accounts track by account.id"
      ng-change="haCtrl.changeAccount()"
      ng-disabled="haCtrl.accounts.length == 1">
  </select>
</div>

When inspecting controllers all data is there. If i change the ng-if to ng-show everything works fine. I do not want to use `ng-show as not wanted to increase the number of watchers in the DOM. Is there something wrong I am doing?

Directive Code:

"use strict";

(function() {

var AccountsDirective = function() {

return {

  restrict: 'E',

  replace: true,

  templateUrl: "app/components/header/account/view.html",

  controller: 'HeaderAccountCtrl as haCtrl'

};

};

  angular.module('mainNgApp').directive('AccountsDirective', AccountsDirective);

})();

Controller Code:

"use strict";

(function() {

var HeaderAccountCtrl = function(
$scope,
atomico,
events,
userState
) {

var _this = this;

atomico.ready(function() {
  _this.accounts = atomico.metadata['accounts'];
  _this.current  = atomico.metadata['account'];
});

_this.changeAccount = function(){
  atomico.metadata['account'] = _this.current;

  userState.setActiveAccountId(_this.current.id, function() {
    events.account.change(_this.current);
  });
};

};

HeaderAccountCtrl.$inject = [
'$scope',
'atomico',
'events',
'userState'
];

angular.module('mainNgApp').controller('HeaderAccountCtrl', HeaderAccountCtrl);

})();

The errors i get when switching to ng-if are as below:

TypeError: Cannot read property 'appendChild' of undefined
    at updateOptions (angular-1.6.4.self-cbf63df….js?body=1:30346)
    at Object.ngOptionsPostLink (angular-1.6.4.self-cbf63df….js?body=1:30249)
    at angular-1.6.4.self-cbf63df….js?body=1:1347
    at invokeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:10427)
    at nodeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:9816)
    at compositeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:9056)
    at nodeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:9810)
    at delayedNodeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:10177)
    at compositeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:9056)
    at compositeLinkFn (angular-1.6.4.self-cbf63df….js?body=1:9059) ""
TypeError: Cannot read property 'value' of undefined
    at SelectController.writeNgOptionsValue [as writeValue] (angular-1.6.4.self-cbf63df….js?body=1:30117)
    at Object.ngModelCtrl.$render (angular-1.6.4.self-cbf63df….js?body=1:32811)
    at ngModelWatch (angular-1.6.4.self-cbf63df….js?body=1:28960)
    at Scope.$digest (angular-1.6.4.self-cbf63df….js?body=1:17992)
    at Scope.$apply (angular-1.6.4.self-cbf63df….js?body=1:18270)
    at HTMLAnchorElement.<anonymous> (angular-1.6.4.self-cbf63df….js?body=1:27000)
    at HTMLAnchorElement.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLAnchorElement.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
TypeError: Cannot read property 'value' of undefined
    at SelectController.writeNgOptionsValue [as writeValue] (angular-1.6.4.self-cbf63df….js?body=1:30117)
    at Object.ngModelCtrl.$render (angular-1.6.4.self-cbf63df….js?body=1:32811)
    at angular-1.6.4.self-cbf63df….js?body=1:30156
    at Scope.$digest (angular-1.6.4.self-cbf63df….js?body=1:18000)
    at Scope.$apply (angular-1.6.4.self-cbf63df….js?body=1:18270)
    at HTMLAnchorElement.<anonymous> (angular-1.6.4.self-cbf63df….js?body=1:27000)
    at HTMLAnchorElement.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLAnchorElement.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
TypeError: Cannot read property 'nodeName' of undefined
    at nodeName_ (angular-1.6.4.self-cbf63df….js?body=1:886)
    at getBooleanAttrName (angular-1.6.4.self-cbf63df….js?body=1:3497)
    at Attributes.$set (angular-1.6.4.self-cbf63df….js?body=1:8650)
    at ngBooleanAttrWatchAction (angular-1.6.4.self-cbf63df….js?body=1:22801)
    at Scope.$digest (angular-1.6.4.self-cbf63df….js?body=1:18000)
    at Scope.$apply (angular-1.6.4.self-cbf63df….js?body=1:18270)
    at HTMLAnchorElement.<anonymous> (angular-1.6.4.self-cbf63df….js?body=1:27000)
    at HTMLAnchorElement.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLAnchorElement.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)

Answer 1

The error is suggesting that accounts is not defined. Looking at your controller code, this is set via the atomico.ready() function which is where the problem is going to be.

ngShow only hides elements in the DOM whereas ngIf will add and remove them.

What is happening is that the ngIf is adding your component into the DOM, and it is only at this point that the controller is instantiated. However the atomico.ready() is not being called because (I assume) it has already been called when the page was loaded.

I'm not sure what the atomico service/factory is, but I'd suggest passing arguments to the directive instead of using it in the directive. That way the page can handle the atomico.ready() callback instead, and pass the results to the directive when needed.

So, make use of the bindToController parameter:

var AccountsDirective = function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "app/components/header/account/view.html",
        controller: 'HeaderAccountCtrl as haCtrl',
        scope: {},
        bindToController: {
             accounts: "<"
        }
    };
};

And pass in using:

<accounts-directive accounts="ctrl.accounts"></accounts-directive>