我有2个下拉菜单,用户可以从中进行选择。并且基于这些值,属性被发送到指令并且应该调用相应的函数。
问题是没有在更改值时调用指令。
这是html代码:
<div ng-controller=visCtrl>
<select ng-model="selectedDistrict" ng-options="item as item for item in districts " ng-init="selectedDistrict='GUNTUR'"></select>
<select ng-model="selectedYear" ng-init="selectedYear='2005'" ng-options="item as item.YEAR for item in opendata | filter:{ DISTRICT: selectedDistrict }"></select>
<div ng-repeat="item in categories">
<div id="containervis-item" ng-init="init(item.value)" class="container col-sm-12">
<div scatter-chart city-name={{selectedDistrict}} crime-name={{item}} current-year={{selectedYear}} vis-file=dataFile id="divVisScatter-{{item}}" class="divVis divVisScatter col-sm-6">
{{item}}
</div>
<div linear-chart city-name={{selectedDistrict}} crime-name={{item}} vis-file=dataFile class="divVis divVisLine col-sm-6"></div>
</div>
</div>
</div>
这是指令代码:
myApp.directive('scatterChart', function($window){
return{
restrict:'EA',
template:"<svg width='850' height='200'></svg>",
link: function(scope, elem, attrs){
var d3 = $window.d3;
var rawSvg=elem.find('svg');
var svg = d3.select(rawSvg[0]);
var cityName=attrs.cityName;
var crime=attrs.crimeName;
var year=attrs.currentYear;
console.log(cityName);//doesnt get called when selection is made
}
};
});
仅使用初始值调用该指令。此外,在进行选择时,DOM会发生变化,city-name
和crime-name
属性会获得新值,但函数不会被调用。
答案 0 :(得分:1)
通过'相应的函数应该调用'你的意思是链接功能?链接功能在编译阶段后执行一次,它是将事件监听器附加到HTML模板等的正确位置。检查here以获取更多详细信息。
如果您想在每次属性值发生变化时执行某个功能,您必须$watch
,并将所有必要的代码包含在$watch
函数中。
例如
scope.$watch(function() {
return attrs.cityName;
}, function(value) {
console.log(value);
})