关于angularjs中directive中scope只在页面加载时运行的问题

Question

在controller中有一个ngclick的函数定义，在定义函数中设置$scope.xx的值，并最后执行$scope.$apply();但是对应的directive的link中alert(JSON.stringify($scope.data));只在页面加载时执行了$scope.data的初始值，对于后面button的按下，触发ngclick函数中执行$scope.data的变更却没有关联到directive中的对应数据变更，求各位大大的帮忙，非常感谢，下面是代码：

首先下面代码能通过ajax获取返回值，并能成功取得。现象是画面加载时画面弹出对话框显示[3,3,3,3],但是当画面点击按钮执行了ngclick的程序$scope.materialMethodForecast后，变更了$scope.data值并apply后，directive中并没有alert数据，就是画面没有跳出对话框显示[1,2,3,4],代码如下：

---

app.controller("material-method-ctrl", function ($scope) {

$scope.data = [3, 3, 3, 3];
$scope.materialMethodForecast = function () {
        $.ajax({
            url: contextPath + "/predictPerformance",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: mapJson,
            success: function (data) {
                var dataObj = eval("(" + data + ")");
                var ratio = dataObj.graph.ratio;
                $scope.data = ratio; //如获得为数组：[1,2,3,4]
                $scope.$apply();
            },
            error: function (res) {
                alert(res.responseText);
            }
        });
    }
}

});
app.directive("radar", function () {

return {
    scope: {
        id: "@",
        data: "="
    },
    restrict: "E",
    template: "<div style='height:400px;'></div>",
    replace: true,
    link: function ($scope, element, attrs, controller) {
        alert(JSON.stringify($scope.data));
    }
};

});

---

<button type="button" class="btn btn-primary btn-lg btn-block" id="material-method-forecast-btn" ng-click="materialMethodForecast()">按下</button>

<radar id="performance-radar" data="data"></radar>

真的很困惑，求帮助~

Answer 1

给你一个最简单的魔法技巧：

<radar id="performance-radar" data="data" ng-if="data"></radar>

但，我不会告诉你原因。