指令中的$ watch并在单击时激活指令

用户名

我的基本问题是我在指令中有一个d3图形,我希望它在按下按钮Submit时显示。指令中的d3代码被包装到中,promise.then因为它必须从$http.get(...)请求中获取数据

现在,我的策略是:a-具有与控制器中ng-click的函数链接属性的按钮chnagePresent()b-具有$scope.present取值truefalse根据指令是否应显示图形的变量$watch指令内的ca元素,绑定到$scope.present控制器中的,并if在回调函数内带有一条语句。如果$scope.present等于true,则将触发该指令,否则将不执行任何操作(此处仅向控制台输出一条虚拟消息)。

该代码如下所示:

指示:

.directive('ngGraphfingerprint',['getGraphsService',function(getGraphsService){

      return{

        restrict: 'A',
        scope : {},
        controller: 'MainCtrl',
        link: function(scope,element,attrs){

            var expression = scope.present

            scope.$watch(expression,
              function(newValue){

                if (newValue === true){

                  // var dataset = [

                  //   {'startYear' : '2005-01-12',
                  //   'label' : 'green',
                  //   'value' : 0.6,
                  //   'ceo' : 'Marcus Tetha'},
                  //   {'startYear' : '2005-01-12',
                  //   'label' : 'green',
                  //   'value' : 0.6,
                  //   'ceo' : 'Marcus Bo'},
                  //   {'startYear' : '2007-06-07',
                  //   'label' : 'red',
                  //   'value' : 0.9,
                  //   'ceo' : 'Marcus Alpha'},
                  //   {'startYear' : '2011-03-04',
                  //   'label' : 'red',
                  //   'value' : 0.03,
                  //   'ceo' : 'Marcus Gamma'},
                  //   {'startYear' : '2011-07-28',
                  //   'label' : 'yellow',
                  //   'value' : 0.1,
                  //   'ceo' : 'Marcus Beta'}

                  // ];

                  getGraphsService.FunctionF().prom.then(

                    var w = 750;
                    var h = 400;
                    var padding = 30;


                    var svg = d3.select(element[0])
                                .append('svg')
                                .attr('width',w)
                                .attr('height',h);

                    var xScale = d3.time.scale()
                                  .domain([new Date('2004-01-01'),new Date('2014-12-31')])
                                  .range([padding*2.5,w-padding*0.5]);

                    var yScale = d3.scale.ordinal()
                                  .domain(dataset.map(function(d){return d.ceo;}))
                                  .rangeBands([h - padding, padding]);

                    var yAxis = d3.svg.axis()
                                  .scale(yScale)
                                  .orient('left')
                                  .ticks(4);

                    var xAxis = d3.svg.axis()
                                  .scale(xScale)
                                  .orient('bottom')
                                  .ticks(d3.time.years)
                                  .tickFormat(d3.time.format('%Y'));


                    var axisStyle = {'fill': 'none', 'stroke': 'black','shape-rendering': 'crispEdges','font-family':'sans-serif','font-size': '11px'};

                    svg.append('g')
                          .style(axisStyle)
                          .attr('transform', 'translate(0,' + (h - padding) + ')')
                          .attr('text-anchor', 'end')
                          .call(xAxis);

                    svg.append('g')
                          .style(axisStyle)
                          .attr('transform', 'translate(' + padding*2.5 + ',0)')
                          .attr('text-anchor', 'end')
                          .call(yAxis);

                    svg.selectAll('rect')
                       .data(dataset)
                       .enter()
                       .append('rect')
                       .attr('x',function(d){return xScale(new Date(d.startYear));})
                       .attr('y',function(d){return yScale(d.ceo)+yScale.rangeBand()/2-10;})
                       .attr('height',20)
                       .attr('width',20)
                       .attr('fill',function(d){return d.label;});

                    svg.selectAll('text.label')
                      .data(dataset)
                      .enter()
                      .append('text')
                      .attr('class','label')
                      .attr('x',function(d){return xScale(new Date(d.startYear)) + 10;})
                      .attr('y',function(d){return yScale(d.ceo)+yScale.rangeBand()/2;})
                      .text(function(d){
                        return d.startYear;
                      })
                      .on('mouseout',function(){d3.select(this).style('opacity','0');})
                      .on('mouseover',function(){d3.select(this).style('opacity','1');});

                  )

                  }else{

                    console.log('Nothing changed!');

                  }

              });   

控制器:

$scope.present = false;

        $scope.changePresent = function(){

          $scope.present = true;
          console.log($scope.present);

        };

HTML:

<div ng-graphfingerprint="present" val="data"></div> 

现在上面的代码不起作用。指令内的简单$ watch也不起作用,所以我想知道在指令内使用$ watch时是否还要注意其他事项。我的编辑器似乎也不喜欢回调函数中promise.then方法$watch但基本上,我什至不知道$watch在这种情况下我的使用策略是否正确。谁能帮我?

如果您需要任何有关此问题的说明,请告诉我。

粗鲁的兔子

您遇到的问题是该指令具有隔离范围(scope: {}),并且您正在尝试访问父范围的当前属性。

从指令中删除隔离范围,或在隔离范围中引用当前属性:

myModule.directive('graphfingerprint', function(){
    return {
        restrict: 'A',
        scope : { present: '=graphfingerprint'}, 

        link: function(scope, element, attrs) {

            scope.$watch('present', function(newValue){
            });
        }
    };
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章