ng-if 仅在直接从服务引用 var 时才有效，而不是控制器范围内的 var

Question

>我试图理解为什么当我引用控制器中分配给服务值的局部变量时，我的 ng-if 语句不起作用，但如果直接分配给该服务的值，它会正常工作。

例如，这适用于：

<div class="map" ng-if="interactiveMap.mapService.esriLoaded">
    <esri-map id="map1" 
    map-options="interactiveMap.mapOptions" 
    load="interactiveMap.load"
    register-as="interactiveMap">
    </esri-map>
</div>

使用以下控制器：

angular.module('tamcApp')
  .controller('InteractivemapCtrl', function (map, config) {
    var self = this;
    self.map = {};
    self.mapService = map;
    self.mapOptions =  {
                    basemap: 'mcgiStreet',
                    extent: config.globals.initialExtent,
                    sliderStyle: 'small'
            };
     self.load = function(){
       map.getMap('interactiveMap').then(function(thisMap) {
         console.log(thisMap);
         self.map = thisMap;
       });
     };
  });

但是，如果我将"esriLoaded"变量分配给范围内的本地变量，如下所示：

<div class="map" ng-if="interactiveMap.esriLoaded">
    <esri-map id="map1" 
    map-options="interactiveMap.mapOptions" 
    load="interactiveMap.load"
    register-as="interactiveMap">
    </esri-map>
</div>

控制器在这里：

angular.module('tamcApp')
  .controller('InteractivemapCtrl', function (map, config) {
    var self = this;
    self.map = {};
    self.esriLoaded = map.esriLoaded;
    self.mapOptions =  {
                    basemap: 'mcgiStreet',
                    extent: config.globals.initialExtent,
                    sliderStyle: 'small'
            };
     self.load = function(){
       map.getMap('interactiveMap').then(function(thisMap) {
         console.log(thisMap);
         self.map = thisMap;
       });
     };
  });

然后它不起作用。 "esriLoaded"的值始终为 false(这是 esriLoaded 的默认值(。 就像在"map"服务中更新self.ersiLoaded的值时，它不会更新该值。 这是"地图"服务的代码，以防人们需要它来回答这个问题。

angular.module('tamcApp')
  .service('map', function (config, esriLoader, esriRegistry, esriMapUtils) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    var self = this;

    self.esriLoaded = false;

    self.lazyload = function() {
      // Make a call to load Esri JSAPI resources.
      // A promise is provided for when the resources have finished loading.
      esriLoader.bootstrap({
            url: config.globals.esriJS
            }).then(function() {
                    // Set Loaded to be true
                    self.esriLoaded = true;
                    // DEFINE CUSTOM BASEMAP USED BY ALL MAPS
                    esriMapUtils.addCustomBasemap('mcgiStreet', {
                        urls: ['http://myhost.com/arcgis/rest/services/BaseMap/StreetMap/MapServer'],
                        title: 'MCGI Street Map',
                        thumbnailurl: ''
                    });

            });
    };
    if (!self.esriLoaded) {
            self.lazyload();
    }

    self.getMap = function(id){
      return esriRegistry.get(id);
    };
  });

Answer 1

这实际上不是因为角度，而是因为 JavaScript。 map.esriLoaded是一个boolean值，一个原语，因此不是一个对象，这导致你的本地self.esriLoaded不会成为引用(因为只能引用对象(，而只是包含在map.esriLoaded中的布尔值的普通副本。

一个简短的例子来说明它：

//Primitive
var a = 5; //primitive
var b = a; //b just copies the value of a
a = 6; //This will change a, but not b
conosle.log(b); //will print 5
//Object
var a = { someValue: 5 }; //a is now a reference to that object
var b = a; //b also becomes a reference to the object above
a.someValue = 1337; //will change the object a is referencing, thus also
                    //changing the object b is referencing, as its the same object
console.log(b.someValue); //will print 1337