$ watch on directive link function不读取更新的值

时间:2015-03-03 13:27:39

标签: javascript angularjs angularjs-directive angularjs-controller

所以我整个上午一直在这个地方。经过文档和大量的堆栈溢出问题后,我决定放弃。

情节是,我有一个指令,link功能我在控制器上观看一个属性。 link函数运行时,此属性具有正确的值,但$watch未检测到正在控制器上进行的更改。

这是控制器:

angular
.module('ec.search')
.controller('MapController', function MapController($scope, $rootScope) {
  'use strict';

  var mapCtrl = this,
    google = window.google;

  mapCtrl.activeMerchantCardId = "something";

  mapCtrl.showMerchantLocations = function (locations) {
    var bounds = new google.maps.LatLngBounds(),
        marker,
        i,
        len;

    for (i = 0, len = locations.length; i < len; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: $scope.map,
        merchant: i
      });
      google.maps.event.addListener(marker, 'click', handleMarkerClick);
      bounds.extend(marker.position);
    }
    $scope.map.fitBounds(bounds);
  };

  function handleMarkerClick() {
    var marker = this;
    $scope.$apply(function(){
      $scope.map.panTo(marker.getPosition());
      mapCtrl.activeMerchantCardId = marker.merchant;
    });
  }
});

指令:

angular
.module('ec.search')
.directive('ecMapMerchantCard', function MapMerchantCardDirective() {
'use strict';

return {
  restrict: 'A',
  controller: 'MapController',
  link: function(scope, element, attrs, controller) {
    var el = element[0],
        merchantCard;

    scope.$watch(function() {
      return controller.activeMerchantCardId;
    }, function(newValue, oldValue) {
      console.log(newValue);
      console.log(oldValue);
    }, true);
  }
};  });

和HTML

<div class="listing-default-map-wrapper" data-ec-map-sticky>
  <div class="listing-default-map-container"
       data-ec-map
       data-initial-locations='{{ json_encode($merchantLocations, JSON_HEX_APOS | JSON_HEX_QUOT) }}'>
  </div>
  <div data-ec-map-merchant-card></div>
</div>

所以在初次运行时,我会看到&#34;&#34;&#34;被打印在控制台上。但是,如果我点击标记,那会触发更新属性值的handleMarkerClick函数,$watch不会读取更新值,它仍然是&#34;某些内容&#34 ;

现在可能这不是最有角度的方式,但是我已经尝试了不同的堆栈溢出解决方案,但它们似乎都没有用。我不明白为什么指令没有得到新值。

感谢任何输入的进步

0 个答案:

没有答案