Question

我有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属性会获得新值，但函数不会被调用。

Answer 1

通过'相应的函数应该调用'你的意思是链接功能？链接功能在编译阶段后执行一次，它是将事件监听器附加到HTML模板等的正确位置。检查here以获取更多详细信息。

如果您想在每次属性值发生变化时执行某个功能，您必须$watch，并将所有必要的代码包含在$watch函数中。
例如

scope.$watch(function() {
     return attrs.cityName;
}, function(value) {
    console.log(value);
})

指令不会触发属性更改

1 个答案: