AngularJS 指令中的服务被调用两次

Question

我想弄清楚我的指令是否被初始化了两次而不是一次，以及是否有更好的方法来初始化和观察变化。

HTML 我的代码 angular index.html:

<!-- Select drop down-->
<select name="selectcity" ng-model="selectedcity" ng-options="key as value for (key , value) in cities"></select>

<!--Directive-->
<div simple-chart chart-data="lineData"></div>

我有一个指令，它通过服务从 AJAX 调用中获取数据，然后像这样初始化指令模板，

MyService.getData(scope.selectedcity).then(
function (data) {
//code goes here
console.log("Initializing the template for the first time");
scope.lineData.push(data.info);
});

我有一个 select 框，用户可以在其中更改城市，然后需要更新指令以显示新城市的信息。我已经编写了我的指令来跟踪这样的变化，

scope.$watch('selectedcity', function (nv) {
    if (scope.lineData !== undefined) {
        //code goes here
        console.log("Going to change the city to, "+nv);
        //Going to call the service for the new city
        MyService.getData(nv).then(
            function (data) {
                //code goes here
                console.log("Initializing the template for the first time");
                scope.lineData.push(data.info);
            });
    }
});

我注意到当页面加载时，上面的两个函数都会被调用，因为控制台打印，

Initializing the template for the first time
Going to change the city to, Chicago

这是否意味着该指令被初始化了两次？
有没有办法仅在 select 下拉列表的值发生变化（即 selected 城市发生变化）时调用 scope.$watch？
是否需要初始化'selectedcity'的值来避免指令被初始化两次？
有更好的方法吗？

Answer 1

根据 docs 你应该检查你的 $watch 表达式中的 newValue !== oldValue 是否：

scope.$watch('selectedcity', function (newValue, oldValue) {
  if (newValue && newValue !== oldValue) {
    // We have a new value set, and it's not the same as the old.
    // Do something
  }
}

AngularJS 指令中的服务被调用两次

AngularJS Service in directive being called twice

angularjs

angularjs-directive

angularjs-service