所以我整个上午一直在这个地方。经过文档和大量的堆栈溢出问题后,我决定放弃。
情节是,我有一个指令,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 ;
现在可能这不是最有角度的方式,但是我已经尝试了不同的堆栈溢出解决方案,但它们似乎都没有用。我不明白为什么指令没有得到新值。
感谢任何输入的进步