Question

问题在标题中说明。我有以下代码。

JavaScript的：

app.controller("myCtrl", function($scope) { //this is my controller    
  $scope.type = "type";                   

  $scope.swapChartType = function(type) { //function for line chart and bar chart  on button click
    if ($scope.type == 'line') {
      $scope.type = 'bar'
    } else {
      $scope.type = 'line';
    }
    alert($scope.type);
  }

// this is my directive

app.directive('hcLine', function() {
  return {
    restrict: 'CAE',
    replace: true,
    scope: {
      items: '=',
      title:'=',
      chartType: '=', //not working
    },
    controller: function($scope) {},
    template: '<div></div>',
    link: function(scope, element, attrs) {
      // console.log(scope.type);
      var chart = new Highcharts.Chart({
        chart: {
            borderWidth: 1,
            backgroundColor: '#736F6E',
            paddingTop:40,
            marginLeft: 50,
            marginRight:50,
	        renderTo: element[0],
	        type: scope.chartType
        },
        title: {
        	style:{
        		 fontSize: 14,
        	},
	        text: scope.title
        },
        subtitle: {
        	text: null
        },
        xAxis: {
          categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
        },
        series: [{
          name: 'Value',
          color: '#0000FF',
          data: scope.items
        }],            
      });
    }
  }
});

Here is my HTML:

<div ng-repeat="perspective in perspectives">
  <highcharts-line class="hc-line" items="perspective.graphData" title="perspective.title"></highcharts-line>
</div>
<div>
  <button ng-click="swapChartType(type)"   chartType="type"></button> 
</div>

我想用视图中的参数调用我的控制器功能我在指令中使用'type'选项，我想在控制器中为line和bar更改我的类型。虽然我比较控制器中的类型它给了我error.Plz一些帮助我传递数据和在运行时我动态改变我的高图类型dynamicaly。通过controlle，directive和view.thanx提前

Answer 1

<div ng-repeat="perspective in perspectives">
  <highcharts-line class="hc-line" items="perspective.graphData" title="perspective.title"></highcharts-line>
</div>
<div>
  <button ng-click="swapChartType(type)"   chartType="type"></button> 
</div>

app.directive('highchartsLine', function() {
  return {
    restrict: 'CAE',
    replace: true,
    scope: {
      items: '=',
      title:'=',
     type: '='


    },

    template: '<div></div>',
    link: function(scope, element, attrs) {
         scope.$watch('type', function(newVal, oldVal){alert("")
   // console.log(scope.type);
    var chart = new Highcharts.Chart({
        chart: {

            borderWidth: 1,
            backgroundColor: '#736F6E',
            paddingTop:40,
            marginLeft: 50,
            marginRight:50,
            renderTo: element[0],
            type: scope.type
       },
        title: {
            style:{
                 fontSize: 14,
                 },
           text: scope.title
        },

        subtitle: {
            text: null
        },
        xAxis: {
          categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
        },
      series: [{
          name: 'Value',
          color: '#0000FF',
          data: scope.items
        }],




      });
    });
   }




    }

嘿，我得到了答案这是我的指示和一些修改

 app.controller("myCtrl",['$scope', function($scope) {              
        $scope.type = 'line';                     

        //-------------------perspectives array for title and value
    $scope.perspectives = [{
         title : 'Depression Remission at 12 Months CMS159v4',
         graphData: [34,2,5,5,2,1,10]
      },
      {
        title : 'Comprehensive Diabetes Care: HbA1c Poor Control (>9.0%)',
        graphData: [2,7,9,25,55,20]
       },
      {
       title : 'Screening for Clinical Depression and follow-up',
        graphData: [25,4,67,44,99,27]
      },
       {
      title : 'Tobacco Assessment and Counseling',
        graphData: [34,33,22,10,22,55]
      },
       {
        title : 'Alcohal AND Drug Misuse(SBIRT)',
        graphData: [22,44,19,22,30,33]
      }];



       $scope.swapChartType = function(){          //function for line chart and bar chart  on button click
        if ($scope.type == 'line') {
            $scope.type = 'bar';
            } else {
                $scope.type = 'line';
            }
            alert($scope.type +'inside');
       }
       alert($scope.type + 'outside');

this is  Html page

}）;

这是我的控制器

      <highcharts-line class="hc-line" items="perspective.graphData" title="perspective.title" type="type"></highcharts-line>

  </div>

  <div>
    <button ng-click="swapChartType()">Line/Bar</button> 
  </div>

enter code here

我发布此作品可以帮助我，如果有人需要帮助token

如何调用带有控制器参数的函数进入视图以及如何将该函数绑定到angularjs

1 个答案: