Angularjs-当dom操作被分配给按钮点击时,它是有效的,在指令中它是不完整的
Angularjs - when dom manipulation is assigned to button click it works, in directive it is incomplete
我现在已经尝试了几种方法。
方法1
我有一个从服务器加载数据的方法。这在我的控制器中:
$scope.loadResults = function() {
var url = "MY URL";
$http.get(url).success(
function(data, status, headers, config) {
var tempResults=[];
for (var i = 0; i < data.length; i++) {
tempResults.push({date: data[i].date, p: data[i].p, result: data[i].result});
}
$scope.results = tempResults;
$scope.drawChart(); //THIS IS THE METHOD I WANT TO RUN (this is approach number #1)
}
);
};
这是我的绘图方法(也在控制器中(:
$scope.drawChart = function(){
var r = Raphael("pie");
var tempTypeDistribution = [];
for (var j = 0; j < 7; j++) {
tempTypeDistribution.push($scope.typeCount(j));
}
$scope.typeDistribution=tempTypeDistribution;
if($scope.typePie){
$scope.typePie.clear();
}
$scope.typePie = r.piechart(120, 120, 90, $scope.typeDistribution,
{
legend: ["%% - A", "%% - B", "%% - C", "%% - D", "%% - E", "%% - F", "%% - G"],
legendpos: "east"
}
);
};
这不起作用。图表已绘制,但有错误。添加$scope.$apply();
会出现以下错误:Error: $digest already in progress
和添加safeApply没有任何作用。
方法2
在我的directive.js中,我创建了这个results
:的观察者
App.directive('chart', function(){
return{
restrict: 'E',
link: function(scope, elem, attrs){
var data = scope[attrs.ngModel];
scope.$watch('results', function(v){
var r = Raphael("pie");
var tempTypeDistribution = [];
for (var j = 0; j < 7; j++) {
tempTypeDistribution.push(scope.typeCount(j));
}
if(scope.typePie){
scope.typePie.clear();
}
scope.typePie = r.piechart(120, 120, 90, tempTypeDistribution,
{
{
legend: ["%% - A", "%% - B", "%% - C", "%% - D", "%% - E", "%% - F", "%% - G"],
legendpos: "east"
}
});
scope.$apply();
});
}
};
});
同样,这是行不通的。图表已绘制,但有错误。添加scope.$apply();
会出现以下错误:Error: $digest already in progress
和添加safeApply没有任何作用。
方法3
我在视图中创建了一个按钮:
<div id="pie">
<chart ng-model='data'> </chart>
</div>
<button class="btn btn-success" type="submit" ng-click="drawChart()" tabindex="3">draw</button>
当我点击它时,图表会被完美地绘制出来,就像我想要的一样。但我希望图表在"结果"更改时自动重新绘制。所以我应该使用一个指令,但显然它不起作用。有人能帮忙吗?
问题似乎是由graphael在隐藏输出div时的行为引起的:
http://www.shanison.com/2010/07/18/raphael-pie-chart-legend-stacked-line-problem/
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 参数变量出现ngTable指令问题
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 使用每次都不同的transclude重复指令
- 打开一个模态并将其链接到AngularJS中的指令
- 从html创建一个指令,该指令按类名应用函数
- 将JSON对象传递给angular指令
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 如何有效地将游戏数据存储在URL查询字符串中
- JavaScript指令不能像我想象的那样工作
- 如何使用Node.js最有效地解析网页
- AngularJs指令,该指令创建内部有数据对象的新指令
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- AngularJS指令只识别双向绑定类型
- angularjs IE缓存拦截器有效,但破坏了指令
- 有效地对操纵DOM的AngularJS指令进行单元测试
- Angularjs-当dom操作被分配给按钮点击时,它是有效的,在指令中它是不完整的
- 在带有嵌入表单的自定义指令中使用ngModel,并进行有效的验证
- 在Angular指令中,大写只对blur变量有效,而对set变量无效
- 使用 Angular 组件/指令绑定的最有效方法是什么?