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”var分配给范围内的局部变量，就像这样：

<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

ng-if仅在从服务直接引用var时起作用，而不是在控制器范围中引用var

1 个答案: