AngularJS从指令更新模型

Question

我需要从我的指令更新我的模型。这是我的指令，控制器功能和我的观点。

angular.module('madReportingToolApp')
.directive('supplyDemandChart', function ($window) {
    return {
        template: '',
        restrict: 'AE',
        link: function postLink(scope, element, attrs) {
            var margin = {top: 10, right: 20, bottom: 75, left: 50},
                width = element.width() - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            if (scope.currentSelection.children.length > 1) {
                width = (element.width() / 2) - margin.left - margin.right;
            }

            var data = scope.currentSelection,
                selector = '#' + element[0].id;
            data.children.forEach(function (child) {

                var x0 = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);

                var x1 = d3.scale.ordinal();

                var y = d3.scale.linear()
                    .range([height, 0]);

                var xAxis = d3.svg.axis()
                    .scale(x0)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");

                var graphContainer = d3.select(selector).append("div")
                    .attr("class", "graph-container");

                graphContainer.append("h2")
                    .text(child.name)
                    .attr("class", "graph-header")
                    .style("margin", "50%");

                var svg = graphContainer.append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("class", "parentGraphic")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                    .on("click", function(){
                        debugger
                        scope.setCurrentSelection(child);


                    });

                x0.domain(data.weekData.map(function (d) {
                    return d.week;
                }));

                x1.domain(['Supply', 'Demand']).rangeRoundBands([0, x0.rangeBand()]);

                y.domain([0, d3.max(data.weekData, function (d) {
                    return d.supply > d.demand ? d.supply : d.demand;
                })]);

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", ".15em")
                    .attr("transform", function (d) {
                        return "rotate(-65)"
                    });

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".5em")
                    .style("text-anchor", "end")
                    .text("Supply");

                var inner = svg.selectAll(".inner")
                    .data(data.weekData)
                    .enter().append("g")
                    .attr("class", "g graphBar")
                    .attr("transform", function (d) {
                        return "translate(" + x0(d.week) + ",0)";
                    });

                inner.selectAll(".bar")
                    .data(function (d) {
                        return d.innerData
                    })
                    .enter().append("rect")
                    .attr("class", function (d) {
                        return 'bar ' + d.name
                    })
                    .attr("x", function (d) {
                        return x1(d.name);
                    })
                    .attr("width", x1.rangeBand())
                    .attr("y", function (d) {
                        return y(d.value);
                    })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    });

            });
        }
    };
});

我的控制器功能：

$scope.setCurrentSelection = function(objName){
        var children = $scope.currentSelection.children;

        for(var i = 0; i < children.length; i++){
            if(children[i].name === objName){
                $scope.currentSelection = children[i];
            }
        }
        $scope.displayProductGraph = false;
        $scope.displayGeoGraph = true;
    }

我的观点：

<section class="col-xs-12" ng-if="isGraphDisplayed" style="padding: 0px"> <div ng-if="$parent.displayProductGraph"> <div class="col-xs-12"></div> <div id="mad-product-graph" class="col-xs-12" supply-demand-chart></div> </div> <div ng-if="$parent.displayGeoGraph"> <div class="col-xs-12"></div> <div id="mad-geo-graph" class="col-xs-12" supply-demand-chart></div> </div> <div ng-if="$parent.displayLv1CustomerGraph"> <div class="col-xs-12"></div> <div id="mad-lv1-customer-graph" class="col-xs-12" supply-demand-chart></div> </div> <div ng-if="$parent.displayLv3CustomerGraph"> <div class="col-xs-12"></div> <div id="mad-lv3-customer-graph" class="col-xs-12" supply-demand-chart></div> </div> </section>

基本上我需要发生的是，当用户点击svg图像时，它将隐藏显示的当前图像并显示新图像。这是通过调用相同的指令但参数略有不同来完成的。

我在指令中的范围对象可以访问必要的字段（currentSelection，displayProductGraph等）。但是，如果我通过调用函数来更新它（请参阅Controller函数）或者如果我通过设置直接更新模型来更新模型

scope.displayGeoGraph = true
scope.displayProductGraph = false

在我看来，没有任何事情发生。 E.G ng-if无法识别那些布尔值已经改变。

为什么我的指令中的范围似乎没有更新我的控制器的范围，即使它们在技术上是相同的范围？

提前致谢