Question

我正在编写我的第一个非trival Angular应用程序，并且我遇到了一个指令。该指令从控制器的范围获取数据并将其应用于Google Chart。图表不是问题 - 也就是说它与虚拟数据一起工作正常 - 它可以访问通过http获得的范围对象的属性：

我正在访问使用$ http：

的服务中通过API返回的数据

dashboardServices.factory('SearchList', ['$http','$q',
  function($http, $q){
    return {
      getSearchDetails:function(searchType, resultType){

        return $http.get("api/searches/"+searchType+"/"+resultType)
        .then(function(response){
          if (typeof(response.data === 'object')) {

            return response.data;
          } else {
            return $q.reject(response.data);
          }
        },function(response){
          $q.reject(response.data);
        });


      }
    }
  }]);

在我的控制器中，我正在接受此服务的回复并通过promises'“then”方法附加到我的范围：

dashboardControllers.controller('DashboardCtrl', ['$scope',  'SearchList',
        function($scope,  SearchList){

            $scope.searchData = {};
            $scope.searchData.chartTitle="Search Result Performance"

            SearchList.getSearchDetails("all", "count").then(function(response){

                $scope.searchData.total = response.value; //value is the key from my API
            });
            SearchList.getSearchDetails("no_results", "count").then(function(response){ 
                $scope.searchData.noResults = response.value;
            });

        }]);

在某种程度上这可以正常工作，然后我可以使用双向绑定打印视图AS TEXT中的值。注意：我希望能够将值写为文本，因为我试图为图表和文本数据使用单个范围对象。

{{searchData.total | number}}

如上所述，我编写了一个指令，它将打印此数据的特定图表，在此指令中只能访问$ scope.searchData.chartTitle属性。在指令的链接方法中无法访问then函数中设置的值：

这是指令：

statsApp.directive('searchResultsPieChart', function(){
    return{
        restrict : "A",
        scope:{
         vals:'@vals'
        },

        link: function($scope, $elem, $attr){

            var dt_data = $scope.vals;

            var dt = new google.visualization.DataTable();
            dt.addColumn("string","Result Type")
            dt.addColumn("number","Total")
            dt.addRow(["Successful Searches",dt_data.total]);
            dt.addRow(["No Results",dt_data.noResults]);


            var options = {};
            options.title = $scope.vals.title;

            var googleChart = new google.visualization.PieChart($elem[0]);
            googleChart.draw(dt,options)
        }
    }
});

以下是我在视图中使用该指令的方法：

<div search-results-pie-chart vals="{{searchData}}"></div>

我可以看到问题是指令数字值不可用，尽管在绑定到视图时可用。

显然，当这些项目可用时或通过一些回调（或者可能是一种完全不同的方法）时，需要稍后调用该指令，不幸的是，我不确定为什么会出现这种情况或如何解决。

非常感谢任何帮助。我希望这是有道理的。

Answer 1

我认为以下内容对您有所帮助。

首先将vals的指令范围绑定更改为使用=而不是@（有关差异的详细解释，请参阅this question - 基本上{{1插值，而@绑定到父范围中的变量）
然后，将创建图表的指令部分移动到=函数中的render函数中。
然后，link $watch进行任何更改，然后使用新值调用render函数
您还需要稍微改变使用vals的方法，因为您需要清除其内容并在数据更改时添加新元素和新图表（否则随着数据的变化，将添加许多图表！）

以下是ele[0]函数中有关link和新$watch函数的操作示例（更改render绑定，就像我提到的那样显示）：

$scope

希望这会帮助你！

通过Angular Directive中的Promise访问数据集

1 个答案: