angular1.x directive通信问题

0 0 javascript angualr
闭麦听歌1v9
闭麦听歌1v9

声望值:118 0人

2019-02-03 11:55:41 提问

关注 0关注

收藏 0收藏, 54浏览

在angular 1.x版本中使用directive,代码如下
// directive

module.directive('rankChart', function() {
    return {
        scope: {
            id: "@",
            rankItem: "=",
            rankData: "=",
            reloadChartData: "=rankreload"
        },
        restrict: 'E',
        template: '
{{rankData[0].showHand}}

', replace: true, controller: function($scope) { var loadRankChartData = function() { var option = { grid: { x: 50, x2: 50, y: 0, y2: 0, height: $scope.rankItem.length * 40 }, xAxis: { type : 'value', axisLine: {show: false}, axisLabel: {show: false}, axisTick: {show: false}, splitLine: {show: false} }, yAxis: { type : 'category', axisTick: {show: false}, data : $scope.rankItem }, series : [ { name:'贡献值', type:'bar', stack: '排名', barWidth: 16, itemStyle: { normal: { color: '#3F9AE9' } }, label: { normal: { color:'#333333', show: true, position: 'right' } }, data:$scope.rankData } ] };

var myChart = echarts.init(document.getElementById($scope.id)); myChart.clear(); myChart.setOption(option); myChart.on('click',function (param) { console.log(param) dataIndex = param.dataIndex angular.forEach($scope.rankData,function (item) { item.showHand = false }); $scope.rankData[dataIndex].showHand = true

console.log($scope.rankData) })

}

// 对外接口 $scope.reloadChartData = function() { loadRankChartData(); }

}

}; });

html

controller

$scope.rankData = []
$scope.rankItem = []

请求后--
$scope.rankData = [{value: 22,sid:22, rank: 1,showHand:false}]
$scope.rankItem = ['name']
$scope.rankreload($scope.rankItem, $scope.rankdata);

这里使用的echart,想在点击之后改变它的属性,改了之后在directive里能打印出来,showHand为ture,但是controller里或者说页面的值并没有发生变化,看过文档 说 '=' 是双向绑定,不知道为什么controller的值没有改变呢?

请先 登录 后评论

2个回答

  • 暴力丶小白菜103声望 2018-09-25 09:27

    调用下$scope.$apply()
    请先 登录 后评论
  • 路漫猿兮54声望 2018-09-25 09:27

    因为你用了echart中的click事件,而不是ng1自带的ng-click事件,没有办法触发ng1本身的脏检查,而ng1本身的双向数据绑定依赖的就是脏检查机制,因此视图上没有得到更新。解决办法就是手动触发数据模型的检查,也就是$scope.$apply()。
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问