Javascript 角度：使用从指令传递到控制器的值更新视图

这里初露头角的web开发人员正在努力从我的控制器更新视图。

我正在使用highmaps和angular为我的web应用程序构建一个整洁的选择工具。我在控制器的作用域中嵌套了一个指令。我希望此指令更新控制器中存储的值（

selectedCountry

）。然后，我希望控制器在视图上显示最新的

selectedCountry

值。

我已检查指令是否将正确的

selectedCountry

值传递给父控制器。但是，控制器没有更新视图以匹配更新的值。如果有人能看一下，我将不胜感激

此处演示：

index.html

<div ng-app="myApp">
  <div ng-controller="GraphController as graphCtrl">
    <div> {{graphCtrl.showSelectedCountry()}} </div>
    <div> {{graphCtrl.selectedCountry}} </div>
    <high-chart-directive update-selected-country='graphCtrl.updateSelectedCountry(newCountry)'></high-chart-directive>
  </div>
</div>

---

问题是Highcharts.mapChart（元素[0]，getMapOptions（mapClick））；不是角度范围的一部分。因此，此处的任何调用都不会触发angular应用程序刷新。您需要使用$scope.apply（）强制angular更新

---

问题是Highcharts.mapChart（元素[0]，getMapOptions（mapClick））；不是角度范围的一部分。因此，此处的任何调用都不会触发angular应用程序刷新。您需要使用$scope.apply（）强制angular更新

试试这个

<div ng-app="myApp">
  <div ng-controller="GraphController as graphCtrl">
    <div> {{graphCtrl.showSelectedCountry()}} </div>
    <div> {{graphCtrl.selectedCountry}} </div>
    <high-chart-directive update-selected-country='graphCtrl.updateSelectedCountry(newCountry)'></high-chart-directive>
  </div>
</div>

试试这个

<div ng-app="myApp">
  <div ng-controller="GraphController as graphCtrl">
    <div> {{graphCtrl.showSelectedCountry()}} </div>
    <div> {{graphCtrl.selectedCountry}} </div>
    <high-chart-directive update-selected-country='graphCtrl.updateSelectedCountry(newCountry)'></high-chart-directive>
  </div>
</div>

---

你已经用谷歌地图试过了吗？请展示你所有的代码，我是指css和所有的东西，让我看看，如果我做对了。您希望所选国家/地区在选中时更改颜色？感谢您的快速回复@OtávioBarreto！我还没有任何css。实际上，当用户单击地图时，我希望单词“unselected”更改为所选国家的名称。请参阅我的答案。我不确定这是否正是您想要的，Weijian还在下面给出了一个示例，您需要

//强制角度更新$scope。$apply（）你已经用谷歌地图试过了吗？请展示你所有的代码，我指的是css和所有的东西，让我看看，如果我做对了。您希望所选国家/地区在选中时更改颜色？感谢您的快速回复@OtávioBarreto！我还没有任何css。实际上，当用户单击地图时，我希望单词“unselected”更改为所选国家的名称。请参阅我的答案。我不确定这是否正是您想要的，Weijian还在下面给出了一个示例，您需要
//强制角度更新$scope。$apply（）我明白了！谢谢@Weijian！我懂了！谢谢@Weijian！
<div ng-app="myApp">
  <div ng-controller="GraphController as graphCtrl">
    <div> {{graphCtrl.showSelectedCountry()}} </div>
    <div> {{graphCtrl.selectedCountry}} </div>
    <high-chart-directive update-selected-country='graphCtrl.updateSelectedCountry(newCountry)'></high-chart-directive>
  </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('GraphController', function($scope) {
  var self = this;
  self.selectedCountry = 'unselected';
  var outsideScopeTest = function() {
    alert('selectedCountry (from controller scope): ' 
        + self.selectedCountry);
      $scope.$apply();
  };
  self.updateSelectedCountry = function(newCountry) {
    self.selectedCountry = newCountry;
    outsideScopeTest();
  };
  self.showSelectedCountry = function() {
    return self.selectedCountry;
  };
});

myApp.directive('highChartDirective', function () {
  return {
    restrict: 'E',
    scope: {
      updateSelectedCountry: '&'
    },
    link: function(scope, element) {
      Highcharts.mapChart(element[0], getMapOptions(mapClick));

      function mapClick(event) {
        scope.updateSelectedCountry({newCountry: event.point.name});
        alert('selectedCountry (from directive scope): ' 
        + event.point.name);
      }
    }
  };

  function getMapOptions(callback) {
    return {
      title: {
        text: ''
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      series: [{
        data: getTestCountries(),
        mapData: Highcharts.maps['custom/world-highres'],
        // TODO-chantelle: figure out how geoJSON joinBy works
        joinBy: 'hc-key',
        name: 'Emission per capita',
        states: {
          hover: {
            color: '#9370DB'
          }
        },
        dataLabels: {
          enabled: false,
          format: '{point.name}'
        }
      }],
      plotOptions: {
        series: {
          events: {
            click: function(event) {
              callback(event);
            }
          }
        }
      }
    };
  }

  function getTestCountries() {
    return [{
      "hc-key": "ca",
      "value": 0
    }, {
      "hc-key": "br",
      "value": 1
    }, {
      "hc-key": "ru",
      "value": 2
    }];
  }
});