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 的值一样。这是 "map" 服务的代码，以防万一人们需要它来回答这个问题。

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

那其实不是因为angular，而是因为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

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

ng-if only works when referencing var direct from service, instead of var in controller scope

angularjs

angular-ng-if